as 全 球 销量 逾 百 万 册 的 系列 图 书 

m 连续 十 余年 打造 的 经 典 品牌 

e 直观 、 循 序 渐进 的 学 习 教 程 

e 掌握 关键 知识 的 最 佳 起 点 

= “Read Less, Do More” ( 精读 多 练 ) 的 教学 理念 
加 以 示例 引导 读者 完成 最 常见 的 任务 


每 章 内 容 针对 初学 者 精心 设计 ， 生 小 时 轻松 阅读 学 习 ， 


小 时 彻底 掌握 关键 知识 
每 章 助 你 轻松 完成 常见 任务 ， 
通过 提高 应 用 技能 ， 巩 固 所 学 知识 
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ie T fiJavaScript 
1.1 Web 脚 本 编程 基础 
1.2 服务 器 端 与 客户 端 编程 
13 JavaScript fis 






































1.6.1 W3C 和 标准 兼容 
1.6. 2 TS 象 
































.7.1 window.ale 
172 dnt write() 
1.7.3 读 取 document 对 象 JE 




















第 2 童 创建 简单 的 脚本 
2.1 在 Web 页 面 里 添加 JavaScript 
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251 onClik 事 件 处 理 器 
2.5. 2 onMouseOver 和 onMouseOnut 事 件 处 理 器 
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73 全 用 pototype 扩 是 和 继承 对 象 







































































































































































10 I cookie 属性 
编码 和 和 解 
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138 JavaScript HICSS 





13.1.1 AT ET 
131.2Css 样 式 声明 




































13. 2 DOM 的 st E 
13.3 使 用 className 访 问 

了 34DOM 的 styl 
Jax 和 和 切换 样式 表 
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| 象 包装 XMLHttpRequest 
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1 引用 jQuery UI 
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章 到 第 5 章 ， 介 绍 
分 “JavaScript 进 阶 ”， 


比如 循环 控制 
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了 如 何 
包括 第 6 章 至 
事件 处 理 、 面向 
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第 一 部 分 “JavaScript 基 














教程 。 全 新 的 第 5 版 涵盖 了 
以 上 版 本 、Ajax 和 jQuery 等 内 容 。 本 书 着 力 介 
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包括 第 11 章 到 第 15 章 ， 
辑 DOM (文档 对 象 模 型 ) 树 ， 对 页 面 元 素 ; 


部 分 “Ajax”， 包 括 第 介绍 如 何 
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包括 第 22 章 至 
展示 HTML5 的 功能 
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绍 了 JavaScript 编 程 常 




















本 书 内 容 循序 渐 ; 




















最 后 配 























材 。 


， 了 逐步 深入 ， 概 念 和 知识 点 
d 练习 , Hes kA 者 检查 和 巩 
感 兴趣 的 初中 级 中 户 阅 读 和 

















司 所 学 知识 。 
自学 ， 也 可 作为 大 








第 第 五 部 分 
六 部 分 “JavaScript 与 其 
m " 
J2 tH T JavaScript 


本 











Ea 
pL 





比如 











H 
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A 
目标 读者 


对 于 想 学 习 JavaScript 的 读者 来 说 ， 很 可 能 已 经 掌握 了 HTML 和 Web 
面 设计 的 基本 知识 ， 和 希望 为 网 页 添 加 一 些 更 好 的 互动 性 ; 或 者 ,目前 
在 使 用 其 他 语言 进行 编程 ， 想 了 解 一 下 JavaScript 能 够 提供 哪些 更 多 的 


全 已 
RE o 






















































































如 果 对 HTML 没 有 任何 了 解 ， 或 是 没有 任何 计算 机 编程 经 验 ， 我 们 
建议 读者 先 了 解 一 些 些 HTML 基 本 知识 。 HTML 是 非常 易于 理解 的 ， 读 者 
不 必 成 为 HTML 专 家 前 足以 了 解 本 书 的 JavaScript 范 例 了 。 


Javascript 很 适合 作为 学 习 编程 技术 的 出 发 点 ， 在 调试 过 程 所 掌 所 
基本 概念 大 多 可 以 用 于 其 他 的 编程 语言 ， 比 如 C、Java 或 PHP。 
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本 书 的 目标 




















JavaScript 最 初 的 | 


途 是 相当 有 限 的 ， 它 只 











览 器 的 支持 也 很 不 稳定 ， 
器 对 W3C 标 准 
JavaScript © 


其 他 高 
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的 支持 越 来 越 好 ， 对 
很 了 

















车 本 的 功能 ， 对 了 

















E 规 的 编程 语言 。 








LBA 
所 以 只 被 看 作 花哨 的 小 技巧 。 
JavaScript 的 实现 不 


随 着 浏览 


























级 编程 语言 里 


的 编程 规则 能 够 方便 
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面向 对 象 编程 方法 有 


“低调 ” 
同时 保持 HTML 简 
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助 于 编写 稳定 、 易 读 、 
的 编程 技术 和 DOM 脚 本 都 致力 于 为 Web 页 面 
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和 易 读 ， 并 且 能 够 轻松 二 








本 书 着 力 介 绍 JavaS 
逐步 地 介绍 按照 当 
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今 Web 标 # 
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cript 当 今 主要 特性 的 





























也 与 代码 分 离 。 


本 技巧 ， 
准 编写 JavaScript 代 码 


增加 更 好 的 互 














Pt 


比如 








从 基本 概念 
的 最 佳 方式 。 














本 书 约定 


本 书 全 部 代码 范例 都 是 符合 HTML5 标 准 的 ， 但 考虑 到 目前 并 不 是 
所 有 Web 浏 览 器 都 支持 HTML5， 这 些 范例 一 般 会 避免 使 用 HTML5 特 有 
的 语法 。 无 论 读者 使 用 什么 样 的 计算 机 或 操作 系统 ， 这 些 代码 都 能 够 在 
常见 浏览 器 上 正常 运行 。 


除了 每 个 课程 里 的 正文 之 外 ， 书 中 还 有 一 些 标记 为 “说 明 ”、“ 提 
示 ” 或 “注意 ”的 方 框 。 
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里 的 内 容 提供 了 额外 的 解释 ， 帮 助 读者 理解 正文 和 范例 。 
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这 些 方 框 里 的 内 容 提供 额外 的 技巧 、 提 示 ， 帮 助 读 者 更 轻松 地 进行 编程 。 





了 解 这 些 内 容 以 避免 常见 的 错误 。 








实践 练习 


每 章 都 包括 至 少 一 个 部 分 的 内 容 指 导读 者 尝试 自己 完成 脚本 ， 帮 助 读者 建立 编写 
JavaScript 脚 本 的 信心 。 








问答 、 测 验 和 练习 





每 章 的 最 后 都 有 


“ 间 答 " 























“测验 */ 








“练习 





这 三 部 分 内 容 : 
FE 要 是 解答 课程 中 最 常 遇 到 的 问题 ; 


于 测试 读者 对 课程 内 容 的 掌握 情况 ; 
































民 据 课程 的 内 容 提供 








些 让 读者 进 





步 深 入 学 习 的 建议 。 


本 书 结构 
本 书 正文 分 为 六 个 部 分 ， 内 容 的 难度 逐步 提高 。 


。 第 一 部 分 ;JavaScript 基础 
































第 一 部 分 是 JavaScript 语 言 的 基本 知识 ， 介 绍 了 如 何 使 用 常用 函数 编 
写 简单 的 脚本 。 这 部 分 的 内 容 主 要 针对 缺少 或 没有 编程 知识 及 JavaScript 
知识 的 读者 。 


第 二 部 分 : JavaScriptisth 


这 部 分 介绍 更 复杂 的 编程 范例 ， 比 如 循环 控制 、 
象 编 程 、JSON 标 记 、cookie。 
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有 件 处 理 、 面 向 对 














三 部 分 : 文档 对 象 模 型 (DOM) 


部 分 内 容 着 重 介 绍 如 何 使 用 CSS 遍 历 和 编辑 DOM (文档 对 象 模 
， 对 页 面 元 素 进行 样式 化 和 动画 。 其 中 强调 了 使 用 好 的 编码 方 
式 ， 比 如 低调 JavaScript。 
























































































































































这 部 分 介绍 如 何 利用 XMLHttpRequest 对 象 向 服务 器 进行 后 台 调 
响应 ; 建立 简单 的 Ajax 库 ， 调 试 Ajax 应 用 。 


五 部 分 : 使 用 JavaScript 库 


第 
这 部 分 介绍 如 何 使 用 第 三 方 库 ， 比 如 Prototype 和 jQuery， 简 化 跨 浏 
的 开发 
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。 第 六 部 分 ;JavaScript 与 其 他 Web 技 术 的 配合 
最 后 


这 部 分 的 范例 介绍 如 何 使 用 JavaScript 控 制 多 媒体 、 展 示 HTML 
、 编 写 浏 览 器 播 件 等 。 


























必要 工具 


编写 JavaScript 并 不 需要 昂贵 和 复杂 的 工具 ， 比 如 集成 开发 环境 
CIDE) 、 编 译 器 或 调试 器 。 


本 书 的 范例 代码 都 可 以 利用 像 Windows 记 事 本 这 样 的 文本 编辑 软件 
生成 。 每 个 操作 系统 都 会 提供 至 少 一 款 这 样 的 软件 ， 而 且 互 联网 上 还 有 
大 量 免费 或 廉价 的 类 似 软件 。 


| GE 
附录 A“JavaScript 开 发 工具 ” 列 出 的 JavaScript 开 发 工具 和 资源 都 可 以 方便 地 获得 。 


为 了 查看 代码 的 运行 情况 ， 我 们 需要 一 个 web 浏览 器 ， 比 如 匡 、 
Firefox、Opera、Safari 或 Chrome。 建 议 使 用 浏览 器 的 最 新 稳定 版 本 。 


本 书 绝 大 多 数 范例 代码 在 运行 时 并 不 需 ， 只 要 把 源 代 
码 保存 到 计算 机 上 ， 然 后 用 浏览 器 打开 它们 就 可 以 了 。 例 外 的 情况 是 关 
于 cookie 和 Ajax 的 ， 这 些 代码 需要 一 个 web 连接 〈 或 者 是 局 域 网 上 的 一 
个 Web 服 务 连接 ) 和 一 些 Web 空 间 来 上 传代 码 。 对 于 尝试 过 HTML 编码 
的 读者 来 说 ， 都 应 该 具备 上 述 配置 了 ;即使 没有 这 些 配置 ， 使 用 业余 级 
别 的 web 主 机 账户 就 可 以 满足 要 求 ， 而 这 些 都 是 很 便宜 的 。《〈 如 果 想 测 
试 Ajax 代码 ， RIDE AO eRe ee Meee Se 
机 都 是 允许 的 。 
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读者 可 以 访问 www.informit.com/register， 以 本 书信 息 进 行 注册 ， 就 
可 以 方便 地 获得 与 本 书 相关 的 更 新 、 下 载 和 勘误 。 









































第 一 部 分 = JavaScript 基础 








第 1 章 ”了 人 解 JavaScript 
第 2 章 ”创建 简单 的 脚本 
Oe 使 月 RKI 数 





























DOM 对 象 和 内 置 对 象 


数据 类 型 


























第 1 章 ”了解 JavaScript 


本 章 主要 内 容 包 括 : 


关于 服务 器 端 和 客户 端 编 程 
JavaScript 如 何 改善 Web 页 面 
JavaScript 历 史 
“文档 对 象 模 型 ”(DOM) 基础 知识 
window 和 document 对 象 
如 何 使 用 JavaScript 给 Web 页 面 添加 内 容 
如 何 利 用 对 话 框 提示 用 户 


与 其 只 有 文本 内 容 的 祖先 相 比 ， 现 代 的 Web 几 乎 是 完全 不 同 的 ， 它 
包含 了 声音 、 视 频 、 动 画 、 交 互 导航 等 很 多 元 素 ， 而 JavaScript 对 于 实现 
这 些 功 能 扮演 了 非常 重 的 角色 。 


E 第 1 章 中 ， 我 们 将 简要 介绍 JavaScript， 回 顾 它 的 发 展 历史 ， 展 示 
它 如 何 能 够 改善 Web 页 面 ， 读 者 还 会 直 失 始 编号 些 实用 的 JavaScript 
代码 。 
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1.1 Web 脚 本 编程 基础 


阅读 本 书 的 读者 很 可 能 已 经 熟练 使 用 万 
HTML 编 写 Web 页 面 有 一 些 基本 的 理解 。 
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HTML 不 是 编程 语言 《如 其 名 所 示 ) ， 而 是 一 款 标签 语言 ， 用 于 标 
签 页 面 的 各 个 部 分 在 浏览 器 里 以 何 种 方式 展现 ， 比 如 加 粗 或 斜体 字 ， 或 
是 作为 标题 ， 或 是 一 系列 选项 ， 或 是 数据 表格 ， 或 是 其 他 修饰 方式 。 


一 旦 编写 完成 ， 这 些 页 面 的 本 质 就 决定 了 它们 是 静态 的 。 它 们 不 
户 操 作 做 出 响应 ， 不 能 进行 判断 ， 不 能 调整 页 面 元 素 显 示 。 无 论 
可 时 访问 这 些 页 面 ， 其 中 的 标签 都 会 被 以 相同 的 方式 进行 解析 和 显 
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根据 使 用 万 维 网 的 经 验 ， 我 们 知道 网 站 可 以 做 的 A 8 
们 时 常 访问 的 页 面 基 本 上 都 不 是 静态 的 ， 它 们 能 够 包含 “ 活 ” 的 数据 ， 比 
如 分 享 商 品 价格 或 航班 到 达 时 间 ， 字体 和 颜色 的 动画 显示 ， 或 是 点 击 相 
册 或 数据 列表 这 样 的 交互 操作 。 
这 些 灵 活 的 功能 是 通过 程序 (通常 称 为 “脚本 ”) 来 实现 的 ， 它 们 在 
后 台 运 行 ， 操 纵 着 浏览 器 显示 的 内 容 。 
“脚本 ”这 个 术语 显然 来 自 于 话剧 和 电视 领域 ， 那 里 所 用 的 脚本 决定 了 演员 或 主持 人 要 做 的 


事情 。 对 于 Web 页 面 来 说 ， 主 角 是 页 面 上 的 元 素 ， 而 脚本 是 由 某 种 脚本 语言 (比如 
JavaSript) 生成 的 。 对 于 本 书 描述 的 内 容 来 说 , “程序 ”与 “脚本 ”两 个 术语 基本 上 是 可 以 通 
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12 ”服务 器 端 与 客户 端 编程 
给 静态 页 面 添加 脚本 有 两 种 最 基本 的 方式 。 
让 Web 服 务 器 在 把 页 面 发 送 给 用 户 之 前 执行 脚本 。 


确定 把 哪些 内 容 发 送 给 浏览 器 以 显示 给 用 户 ， 比 
据 库 获取 产品 价格 ， 在 用 户 登 录 到 站 点 的 私有 区 


































































































这 样 的 脚本 可 以 
如 从 在 线 商店 的 数 

















域 之 前 核对 














份 ， 或 是 从 邮箱 获取 邮件 内 容 。 这 些 脚 本 通常 运 和 人 
上 ， 而 且 是 在 生成 页 面 并 提供 给 用 户 之 前 运行 的 。 
。 页 外 一 各 方式 并 乐 是 在 服务 器 运行 简 本 : 是 把 
起 发 送 给 用 户 的 浏览 器 。 然 后 浏览 器 运行 这 些 脚 























































































































脚本 与 页 面 

























































































行 于 在 Web 服 务 器 


览 本 ， 操 作 已 经 发 送 
给 浏览 器 的 页 面 内 容 。 这 些 脚本 的 主要 功能 包括 动画 页 面 的 部 分 内 
H 布 





























户 在 页 面 内 拖 放 




















容 ， 重 新 安排 页 面 布局 ， 人 允许 
里 输入 的 内 容 ， EHE E 
这 些 脚 本 称 为 “客户 端 脚本 ”。 
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| 分 介绍 Ajax 技术 时 将 有 所 涉及 。 








本 书 介 绍 的 JavaScript 是 互联 网 上 最 广泛 应 用 的 客 





元 系 ， 验证 用 

















定向 到 其 他 页 面 ， 等 等 。 自 然而 然 ， 














户 端 脚本 。 





第 四 部 








1.3 JavaScript 简介 


























器 ， 对 这 些 元 素 执行 操作 ， 还 可 以 创建 新 元 








JavaScript 编 写 的 程序 能 够 访问 Web 页 面 的 元 素 和 运行 它 的 浏览 
CA o JavaScript ILAJI RE 




































































































































































括 : 

ae ee 位 置 和 样式 《比如 是 否 具有 边框 、 荣 单 、 工 具 栏 等 
新 窗 

。 提供 给 用 户 友好 的 导航 帮助 ， 比 如 下 拉 荣 单 ; 

人 
ISEHH; 

。 在 特定 事件 发 生 时 ， 改 变 页 面 元 素 的 外 观 与 行为 ， 比 如 当 鼠 标 指针 

经 过 元 素 时 ; 
。 检测 和 发 现 特定 浏览 器 支持 的 功能 ， 比 如 第 三 方 插件 ， 或 是 对 新 技 











术 的 支持 。 


于 JavaScript 代 码 只 在 用 户 浏览 器 内 
指令 做 出 快速 响应 ， 从 而 改善 用 户 的 体验 










































































计算 机 运行 的 程序 而 不 是 一 个 页 面 。 另 外 ， 























部 运行 ， 页 面 会 对 JavaScript 
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， 让 Web 应 用 更 像 在 用 

















JavaScript IEMA 


定 的 用 户 操作 ， 比 如 鼠标 点 击 和 键盘 操作 。 














【ED 


几乎 每 种 web 浏 览 器 都 支持 JavaScript。 


户 本 地 
[响应 特 


| 虽然 JavaScript 与 Java 的 名 称 有 些 相 同 部 分 ， 但 两 者 人 虽然 它们 有 一 些 





‖ 相同 的 语法 ， 但 这 些 共同 之 处 并 不 比 与 其 他 语言 的 共 


Az 


1.4 ” ”JavaScript 起 源 


JavaScript 的 祖先 可 以 追溯 到 20 世 纪 90 年 代 中 期 ， 首 先是 Netscape 
Navigator 2 引入 了 1.0 版 本 。 


随后 , “欧洲 计算 机 制造 商 协会 ”(ECMA) 开始 介入 ， 制 定 了 
ECMAScript 规 范 ， 芮 定 了 JavaScript 迅 独 发 展 的 基础 。 与 此 同时 ， 微 软 
发 了 自己 版 本 的 JavaScript: jScript， 在 下 浏览 器 上 使 用 。 













































































JavaScript 不 是 仅 有 的 客户 端 脚本 语言 ， 微 软 的 浏览 器 还 支持 自己 的 Visual Basic 面 向 脚本 
的 版 本 : VBScript。 
但 是 ，JavaScript 得 到 了 更 好 的 浏览 器 支持 ， 现 代 浏览 器 几乎 都 支持 
它 。 


浏览 器 战争 


在 20 世 纪 90 年 代 后 期 ，Netscape Navigator 4 和 IE a 对 
JavaScript 提 供 更 好 的 支持 ， 比 以 前 版 本 的 浏览 器 大 有 改善 


但 不 幸 的 是 ， 这 两 组 开发 人 员 走 上 了 不 同 的 道路 ， 分 别 给 JavaScript 
语言 本 身 及 如 何 与 Web 页 自己 的 规范 。 







































































而 交互 定义 了 自己 

这 种 荒唐 的 情况 导致 开发 人 员 总 是 要 编写 两 个 版 本 的 脚本 ， 利 用 一 
些 复杂 的 、 经 常 可 能 导致 错误 的 程序 来 判断 用 户 在 使 用 什么 浏览 器 ， 然 
后 再 切换 到 适当 版 本 的 脚本 。 
好 在 “网 际 网 络 联盟 ”CW3C) 非常 努力 地 通过 DOM 规 范 各 个 浏览 
器 制作 商 生 成 和 操作 页 面 的 方式 。1 级 DOM 于 1998 年 完成 ，2 级 版 本 完 
成 于 2000 年 年 末 。 

关于 DOM 是 什么 或 它 能 做 什么 ， 本 书 的 相应 章节 会 有 所 介绍 。 


| es 


“网 际 网 络 联盟 "”〈W3C) 是 一 个 国际 组 织 ， 致 力 于 制定 开放 标准 来 支撑 互联 网 的 长 期 发 
展 。 其 站 点 http:/www.w3.org/ 包含 了 大 量 与 Web 标 准 相关 的 信息 与 工具 。 










































































































































































1.5 “<script> 标 签 


户 访问 一 个 页 面 时 ， 页 面 中 包含 的 JavaScript 代 码 会 与 其 他 页 面 
N 容 一 起 传递 给 浏览 器 。 


在 HTML 里 使 用 <script> 和 </script> 标 签 ， 可 以 在 HTML 代 码 目 
含 JavaScript 语 句 。 
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(Oh 
ae 
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<script> 
„JavaScripti tj... 
</script> 

















本 书 的 代码 都 是 符合 HTML5 规 范 的 ， 也 就 是 说 ，<script> 元 素 没 有 
任何 必须 设置 的 属性 (在 HTML5 里 ，type 属 性 是 可 选 的 ， 本 书 的 范例 里 
都 没有 使 用 这 个 属性 ) 。 但 如 果 是 在 HTML4.x 或 XHTML 页 面 里 添加 
JavaScript, MFZ type 属 性 了 : 
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<script type="text/javascript"> 
JavaScripti tj... 
</script> 











y 说 明 : 


JavaScript 是 一 种 解释 型 语言 ， 不 是 C++ 或 Java 那 样 的 编译 语言 。JavaScript 指 令 以 普通 文本 
形式 传递 给 浏览 器 ， 然 后 依次 解释 执行 。 它 们 不 必 首 先 “ 编 译 ? 成 只 有 计算 机 处 理 器 能 够 理解 的 
机 器 码 ， 这 让 JavaScript 程 序 很 便于 阅读 ， 能 够 迅速 地 进行 编辑 ， 然 后 在 浏览 器 里 重新 加 载 页 
| 面 就 可 以 进行 测试 。 















































偶尔 还 会 看 到 <script> 元 素 使 用 属性 language='"JavaScript"， 这 种 方 
式 已 经 被 抛弃 很 入 了 。 除 非 是 需要 支持 很 古老 的 浏览 器 ， 比 如 Navigator 
或 Mosaic， 和 否则 完全 不 必 使 用 这 种 方式 。 
































“抛弃 ?这 个 词 对 于 软件 功能 或 编码 方式 来 说 意味 着 最 好 避免 使 用 ， 因 为 它们 已 经 被 新 功能 
或 新 方式 取代 了 。 


















































虽然 为 了 实现 向 下 兼容 而 仍然 使 用 这 类 的 功能 ， 但 “被 抛弃 ?这 个 状态 通常 暗示 这 样 的 功能 
会 在 不 久之 后 被 清除 。 





本 书 的 范例 把 JavaScript 代 码 放 置 到 文档 的 body 部 分 ， 但 实际 上 
JavaScript 代 码 也 能 出 现在 其 他 位 置 。 我 们 还 可 以 利 上 
保存 在 外 部 文件 里 的 JavaScript 代 码 ， 关 于 这 方面 的 详细 介绍 请 见 第 2 
章 。 

























































































1.6 DOMS 
< 文档 对 象 模型 ” (DOM) 是 对 文档 及 其 内 容 的 抽象 表示 。 


每 次 浏览 器 要 加 载 和 显示 页 面 时 ， 都 需要 解释 〈 更 专业 的 术语 
是 “解析 >) 构成 页 面 的 HTML 源 代码 。 在 解析 过 程 中 ， 浏 览 器 建立 一 个 
内 部 模型 来 代表 文档 里 的 内 容 ， 这 个 模型 就 是 DOM。 在 浏览 器 泻 染 页 
而 的 可 见 内 容 时 ， 就 会 引用 这 个 模型 。 我 们 利用 JavaScript 可 以 访问 和 编 
| 从 而 改变 页 面 的 显示 内 容 和 用 户 交 互 的 
TEINS 


在 早期 ，JavaScript 只 能 对 Web 页 面 的 某 些 部 分 进行 最 基本 的 访问 ， 
比如 访问 页 面 里 的 图 像 和 表单 ， 可 以 选择 < 页面 上 第 二 个 表单 ”， 或 
是 “名 称 为 registration 的 表单 ”。 


aoe oe skal a arial ng 
DOM 疝 下 兼容 。0 级 DOM 有 时 也 被 称 为 BOM (浏览 器 对 象 模型 )。 从 0 
级 DOM 开 始 ，W3C 逐 渐 扩 展 和 改善 了 DOM 规 范 。 它 更 大 的 野心 是 不 仅 
让 DOM 能 够 用 于 Web 页 面 与 JavaScript， 也 能 用 于 任何 编程 语言 和 
XML. 























































































































































































































说 明 : 


本 书 使 用 1 级 和 2 级 DOM 定 义 。 如 果 想 了 解 各 种 级 别 DOM 的 详细 内 容 ， 可 以 访问 
https://developer.mozilla.org/en/DOM_Levels 。 























1.6.1 W3C 和 标准 兼容 


浏览 器 制作 商 在 最 近 的 版 本 中 对 DOM 的 支持 都 有 了 很 大 的 改善 。 
在 编 写本 书 时 ， IE 最 新 版 本 是 9，Netscape Navigator 以 Mozilla Firefox Œ. 
新 出 世 《〈 当 前 版 本 是 9) ， 其 他 竞争 对 手 还 包括 Opera、Konqueror、 苹 
果 公 司 的 Safari、 人 谷歌 的 Chrome 和 Chromium， 都 对 DOM 提 供 了 出 色 的 






























































Web 开 发 人 员 的 处 境 有 了 很 大 改善 。 除 了 极 特殊 的 一 些 情况 ， 只 要 
在 编程 时 基本 上 可 以 不 考 虑 为 某 个 浏览 器 编写 特 
码 











Hr 

















说 明 : 

早期 浏览 器 ， 比 如 Netscape Navigator (任何 版 本 ) 和 IE 5.5 以 前 版 本 ， 现在 基本 上 已 经 没 
有 人 使 用 了 。 本 书 只 关注 与 1 级 或 更 高 级 别 DOM 兼 容 的 现代 浏览 器 ， 比 如 IE 7+、Firefox、 
Google Chrome, Apple Safari、Opera 和 Konqueror。 我 们 建议 读 省 把 自 己 使 用 的 浏览 器 升级 到 
最 新 版 本 。 



























































1.6.2 ”window 和 document 对 象 


浏览 器 每 次 加 载 和 显示 页 面 时 ， 都 在 内 存 里 创建 页 面 及 其 全 部 元 素 
的 一 个 内 部 表示 体系 ， 也 就 是 DOM。 在 DOM 里 ， 页 面 的 元 素 具 有 一 个 
逻辑 化 、 层 级 化 的 结构 ， 就 像 一 个 父 对 象 和 子 对 象 组 成 的 树 形 结构 。 
人 的 抽象 模 
型 。 每 个 对 象 都 有 “属性 ?列表 来 描述 它 ， 而 利用 JavaScript 可 以 使 用 一 些 
方法 来 操作 这 些 属性 。 


这 个 层级 树 的 最 顶端 是 浏览 器 window 对 象 ， 它 是 DOM 树 里 一 切 对 
象 的 根 。 


window 对 象 具 有 一 些 子 对 象 ， 如 图 1.1 所 示 。 图 1.1 中 第 一 个 子 对 象 
是 document， 这 也 是 本 书 最 经 常 使 用 的 对 象 。 浏 览 器 加 载 的 任何 HTML 
页 面 都 会 创建 一 个 document 对 象 ， 包 含 全 部 HTML 内 容 及 其 他 构成 页 面 
显示 的 资源 。 利 用 JavaScript 以 父子 对 象 的 形式 就 可 以 访问 这 些 信息 。 这 
些 对 象 都 具有 自己 的 属性 和 方法 。 


window 
location 







































































































































































































































































































































































































history 





document navigator 










































































图 1.1 window 对 象 及 其 一 些 子 对 象 
图 1.1 中 window 对 象 的 其 他 子 对 象 是 location〈 包 含 着 当前 页 面 URL 
的 全 部 信息 ) 、 history (包含 浏览 器 以 前 访问 的 页 面 地 址 ) 和 
navigator (包含 浏 览 器 类 型 、 版 本 和 兼容 的 信息 ) 。 第 4 章 将 会 更 详细 
地 介绍 这 些 对 象 ， 其 他 章节 也 会 使 它们 ， 但 目 前 我 们 着 重 于 document 



































WR. 
1.6.3 ”对 象 标签 法 
我 们 用 句点 方式 表示 树 形 结构 里 的 对 象 : 


parent.child 


如 图 1.1 所 示 ，document 对 象 是 window 对 象 的 子 对 象 ， 所 以 在 DOM 
里 就 像 这 样 表示 它 : 


window.document 


HTML 页 面 的 body 部 分 在 DOM 里 是 document 对 象 的 一 个 子 对 象 ， 所 
以 表示 为 : 


window.document.body 


这 种 表示 法 的 最 后 一 个 部 分 除了 可 以 是 对 象 外 ， 还 可 以 是 属 1 
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生 或 方 





法 : 


objecti.object2.property 


object1.object2.method 








举例 来 说 ， 如 果 想 访问 当前 文档 的 tile 属 性 ， 也 就 是 HTML 标 签 
<title> 和 </title>， 我 们 可 以 这 样 表示 : 


window.document.title 


























[以 访问 当前 文档 。 














window 对 象 永远 包含 当前 浏览 器 窗口 ， 所 以 使 用 window.document 就 可 
作为 一 种 简化 表示 ， 使 用 document 也 能 访问 当前 文档 。 

如 果 是 打开 了 多 个 窗口 ， 或 是 使 用 框架 集 ， 那 么 每 个 窗口 或 框架 都 有 单独 的 window 和 
document 对 象 ， 为 了 访问 其 中 的 某 一 个 文档 ， 需 要 使 用 相应 的 窗口 名 称 和 文档 名 称 。 























































































































17 与 用 户 交互 


现在 来 介绍 window 和 document 对 象 的 一 些 方 法 。 首 先 介 绍 的 这 两 个 
方法 都 能 提供 与 用 户 交 互 的 手段 。 


















































1.7.1 window.alert() 


即使 不 知道 window.alert()， 我 们 实际 上 在 很 多 场合 已 经 看 到 过 它 
了 。window 对 象 位 于 DOM 层 级 的 最 顶端 ， 代 表 了 显示 页 面 的 浏览 器 窗 
。 当 我 们 调用 alert0 方 法 时 ， 浏 览 器 会 弹出 一 个 对 话 框 显示 设置 的 信 
息 ， 还 有 一 个 “确定 ”按钮 。 范 例如 下 : 


































































































<script>window.alert("Here is my message");</script> 


























这 是 第 一 个 使 用 句点 表示 法 的 范例 ， 其 中 调用 了 window 对 象 的 
alert() 方 法 ， 所 以 按照 objectmethod 表 示 方 法 就 写 为 window.alert。 
在 实际 编码 过 程 中 ， 可 以 不 明确 书写 window 对 象 名 称 。 因 为 它 是 DOM 层 级 结构 的 最 顶层 
《有 时 也 被 称 为 “全 局 对 象 ") ， 任 何 没有 明确 指明 对 象 的 方法 调用 都 会 被 指向 window， 所 以 
| <script>alert("Here is my message");</script> 也 能 实现 同样 功能 。 
请 注意 要 显示 的 文本 位 于 引号 之 中 。 引 号 可 以 是 双 引 号 ， 也 可 以 是 
单 引 号 ， 但 必须 有 引号 ， 否 则 会 产生 错误 。 


这 行 代码 在 浏览 器 执行 时 ， 产 生 的 弹出 对 话 框 如 图 1.2 所 示 。 





















































ing 









































s Example window. alert - Chromium a sii SE 





Example window. alert 


> X ft file:///home/phil/sAMS/01fig02.html yy Oga 





~ Javascript Alert 


| Here is my message 























1.2 window.alert()Xt if HE 

















1.2 显 示 的 弹出 对 话 框 由 运行 在 Windows 7 旗舰 版 环境 下 的 Chrome 浏 览 器 产生 。 不 同 操 
作 系 统 、 不 同 浏览 器 、 不 同 显示 设置 都 会 影响 这 个 对 话 框 的 最 终 显 示 情 况 ， 但 它 总 是 会 包含 
要 显示 的 信息 和 一 个 “ “确定 ”按钮 。 























提示 : 
































页 面 上 是 不 能 进行 其 他 任何 操作 的 。 具 有 这 种 行为 模式 的 对 








sane ee "对话 框 。 


1.7.2 document.write() 


从 这 个 方法 名 称 就 可 以 猜 到 它 的 功能 。 显 然 它 不 是 旨 
是 直接 向 HTML 文档 写 入 字符 ， 如 图 1.3 所 示 。 


<script>document.write("Here is another message");</script> 





HE 
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z3 






































/® Example document.w 


< C ft Q file:///nome/phil/SAMS/O1figO3.html xy Oga 


Here is another message 


实际 上 ， 无 论 从 功能 来 说 ， 


页 面 输出 内 容 的 笨拙 方式 。 大 

















式 是 使 用 JavaScript 和 DOM。 但 在 本 

















这 个 方法 。 








T 





图 1.3 




















使 document.write() 





还 是 从 编码 风格 与 可 维护 性 来 说 ，document.write 都 是 一 种 向 














多 数 “ 严 肃 ” 的 JavaScript 程 序 员 都 不 会 使 用 这 种 方式 ， 更 好 的 方 

















第 一 部 分 介绍 JavaScript 语 言 的 基本 知识 时 ， 我 们 还 会 使 





JavaScript 编 写 的 “Hello World!” 














在 介绍 一 种 编程 语言 时 ， 如 果 不 使 用 传统 的 “Hello World!”* 范 例 似乎 说 不 过 去 。 这 个 


简单 的 HTML 文 档 如 程序 清和 





ALATA. 





























程序 清单 1.1 ”使 用 alert0 对 话 框 实现 “Hello World! ” 











<!DOCTYPE html> 
<html> 
<head> 
<title>Hello from JavaScript!</title> 
</head> 
<body> 
<script> 
alert("Hello World!"); 
</script> 
</body> 
</html> 


在 文本 编辑 器 里 创建 一 个 文档 ， 命 名 为 hello.html， 输 入 上 述 代 码 ， 保 存 到 计算 机 ， 然 
后 在 浏览 器 里 打开 它 。 





























|, 有 些 文本 编辑 器 会 P REDE Ee Ee: 此 在 保存 文件 时 要 确保 使 用 .html 后 缀 ， 和 否 
则 浏览 器 可 能 不 会 正常 打开 它 














几乎 全 部 操作 系统 都 允许 我 们 鼠标 右键 单 击 HTML 文 件 图 标 ， 从 弹出 菜单 里 选 
方式 ,..”( 或 类 似 的 字眼 ) 。 另 外 一 种 打开 方式 是 先 运行 喜欢 的 浏览 器 ， 然 后 从 菜 
:里 选择 "文件 >“ 打开 ”， 找 到 相应 的 文件 ， 加 载 到 浏览 器 。 










































































| 有 些 浏览 器 的 默认 安全 设置 会 在 打开 本 地 内 容 《〈 比 如 本 地 计算 机 上 的 文件 ) 时 显示 警告 内 容 ， 如 果 看 到 这 
样 的 提示 ， 只 要 选择 允许 继续 操作 即 可 。 





























这 时 会 看 到 如 图 1.2 所 示 的 对 话 框 ， 但 其 中 的 内 容 是 “Hello World!*。 如 果 计 算 机 里 安 
装 了 多 个 浏览 器 ， 可 以 尝试 用 它们 打开 这 个 文件 ， 比 较 得 到 的 结果 。 对 话 框 外 观 可 能 有 细 
微 差别 ， 但 信息 和 “确定 ”按钮 都 是 一 样 的 。 









































1.7.3” 读 取 document 对 象 的 属性 


正如 前 文 所 述 ，DOM 树 包含 着 方法 和 属性 。 前 面 的 范例 展示 了 如 
何 使 用 document 对 象 的 write 方法 向 页 面 输出 文本 ， 现 在 我 们 来 读 取 













































































document 对 象 的 属性 。 以 document.title 属 性 为 例 ， 它 包含 了 HTML 文档 
里 <title> 标 签 的 内 容 。 


在 文本 编辑 器 里 修改 hello.html， 修 改 对 window.alert() 方 法 的 调用 : 


alert(document.title) 


注意 到 document.title 并 没有 包含 在 引号 里 ， 这 时 如 果 使 用 引号 ， 
JavaScript 会 认为 我 们 要 输出 文本 “document.title”。 在 不 使 用 引号 的 情况 
下 ，JavaScript 会 把 document:title 属 性 的 值 传 递 给 alert() 方 法 ， 得 到 的 结 
果 如 图 1.4 所 示 。 












































































































































ript 


& x ft © file;///home/phil/sAMS/hello.html TOOJA 


Javascript Alert 


Hello from JavaScript! 





图 1.4 显示 document 对 象 的 属性 


1.8 小结 
本 章 简要 介绍 了 服务 器 端 脚本 和 客户 端 脚本 的 概念 ， 还 简 述 了 
JavaScript 和 DOM 的 历史 演变 ， 大 概 展示 了 JavaScript 能 够 实现 什么 功能 
来 改善 页 面 和 优化 用 户 体验 。 


本 章 还 简单 介绍 了 DOM 的 基本 结构 ， 展 示 了 如 何 使 用 JavaScript 访 
问 特 定 对 象 及 其 属性 ， 并 且 使 用 这 些 对 象 。 


后 面 的 章节 将 基于 这 些 基本 概念 逐渐 展开 更 高 级 的 脚本 编程 项 































































































































































































19 问答 
H: 如 果 使 用 服务 器 端 脚本 〈 比 如 PHP 或 ASP) ， 还 能 在 客户 这 
JavaScript 进 行 编程 吗 ? 
答 : 当然 可 以 。 事 实 上 ， 这 种 组 合 方式 能 够 形成 一 个 有 力 的 平 
; 实现 功 外 强大 的 应 用 。Google Mail 就 是 个 很 好 的 范例 。 

问 : 应 该 对 多 少 种 不 同 的 浏览 器 进行 测试 呢 ? 


答 : 方便 的 情况 下 越 多 越 好 。 编 写 与 标准 兼容 的 避免 使 用 浏览 器 
专用 功能 的 代码 ， 从 而 让 程序 在 各 个 浏览 器 上 都 能 顺畅 运行 ， 这 不 是 简 
浏览 器 在 特定 功能 的 实现 上 有 一 两 处 细微 差别 ， 总 是 难免 
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H: 包含 JavaScript 代 码 会 不 会 增加 页 面 加 载 的 时 间 ? 























是 的 ， 但 通常 这 种 影响 很 小 ， 可 以 忽略 不 计 。 如 果 JavaScript 
(ANAS ERLE 就 应 该 在 用 户 可 能 使 用 的 最 慢 连接 上 进行 测试 。 除 
了 一 些 极其 特殊 的 情况 ， 这 一 般 不 会 成 为 什么 问题 。 


































































































1.10 ”作业 
请 先 











再 














答 问 题 ， 再 参考 后 面 的 答案 。 


1.10.1 测验 











1. JavaScript 是 解释 型 语言 还 是 编译 型 语 
a. 编译 型 语言 


b. 解释 型 语言 


? 


ll 


























c. 都 不 是 
d. 都 是 
2. 若 要 添加 JavaScript 语 句 ， 必 须 在 HITML 页面 里 使 用 什么 标签 ? 

















a. <script>#ll</script> 
b. <type="text/javascript"> 


c. <!-- 和 --> 





3. DOM 层 级 结构 的 最 顶层 是 : 








a. document 属 性 
b. document 方 法 
c. document 对 象 
d. window 对 象 


1.10.2 ”答案 


1. 选 b。JavaScript 是 一 种 解释 型 语言 ， 它 以 纯 文本 方式 编写 代码 ， 


一 次 读 取 并 执行 一 条 语句 。 


2. ao JavaScriptif 7) Ys JAE <script> # 











</script> Z [A] . 





3. 选 4。window 对 象 位 于 DOM 树 的 顶端 ，document 对 象 是 它 的 一 


个 子 对 象 。 


111 练习 





























在 本 章 的 “实践 ?环节 中 ， 我 们 使 用 了 这 样 一 行 代码 : 


alert(document.title) ; 


Mo 


Do 




















区 别 。 


时 间 。 
) 还 可 以 尝试 用 





它 可 以 输出 document 对 象 的 title 属 性 。 请 尝试 修改 这 段 脚 本 ， 输 出 
document.lastModified 属 性 ， 包含 的 是 Web 页 面 最 后 
FE 名 称 是 区 分 大 小 写 的 ， 注 意 这 个 属性 里 大 写 的 


(提示 : 属性 























在 不 同 的 浏览 



































一 次 修改 的 日 期 和 
































document.write(){t 4 alert0 方 法 向 页 面 直接 输出 信 






























































# 里 运行 本 章 的 范例 代码 ， 观 察 页 





面 显 示 情 况 有 什么 


第 2 章 ”创建 简单 的 脚本 
本 章 主要 内 容 包括 ， 


在 Web 页 面 里 添加 JavaScript 的 各 种 方式 
JavaScript 语 名 的 基本 语法 

Fa 声明 和 使 用 RE 
使 用 算术 操作 符 


区 鼠标 事件 
第 1 章 介 绍 了 JavaScript 是 一 种 能 够 让 Web 页 面 更 具有 交互 性 的 脚本 
语言 % 


本 章 将 介绍 如 何 向 Web 页 面 添加 JavaScript， 以 及 它 的 一 些 基本 语 
法 ， 比 如 语句 、 变 量 、 操 作 符 和 注释 。 同 时 ， 本 章 将 涉及 更 加 实用 的 脚 
本 范例 。 
















































































































































































2.1 在 web 页 面 里 添加 JavaScript 


正如 上 一 章 所 介绍 的 ，JavaScript 代 码 是 和 页 面 内 容 一 起 发 送 给 浏览 
器 的 ， 这 是 如 何 做 到 的 呢 ? 有 两 种 方法 可 以 把 JavaScript 代 码 集成 到 
HTML 页 面 ， 它 们 都 要 使 用 第 1 章 介绍 的 <script> 和 </script> 标 签 。 



















































































第 一 种 方法 是 把 JavaScript 语 句 直 接 包含 在 HIML 文 件 里 ， 就 像 上 
章 所 介绍 的 一 样 。 

















<Script> 
„JavaScripti tj... 
</script> 














第 二 种 方法 ， 也 是 更 好 的 方法 ， 是 把 JavaScript 代 码 保存 到 单独 的 文 
件 ， 然 后 利用 <script> 标 签 的 src〈 源 ) 属性 把 这 个 文件 包含 到 页 面 里 。 


<script src='mycode.js'></script> 
前 例 包含 了 一 个 名 为 mycode.js 的 文件 ， 其 中 有 我 们 编写 的 

JavaScript 语 句 。 如 果 JavaScript 文 件 与 调用 脚本 不 在 同一 个 文件 来， 就 

需要 使 用 相对 或 绝对 路 径 : 

<script src='/path/to/mycode.js'></script> 
或 


<script src='http://www.example.com/path/to/mycode.js'></script> 




















































































































说 HA: 
安 照 惯例 ，JavaScript 代 码 文件 的 名 称 后 绥 是 js。 但 从 实际 情况 来 看 ， 代 码 文件 的 名 称 可 
以 使 用 任何 后 缀 ， 浏 览 器 都 会 把 其 中 的 内 容 当 作 JavaScript 来 解释 。 

把 JavaScript 代 码 保 存 到 单独 的 文件 有 不 少 好 处 : 


e 当 JavaScript 代 码 有 更 新 时 ， 这 些 更 新 可 以 立即 作用 于 使 用 这 个 
JavaScript 文 件 的 页 面 。 这 对 于 JavaScript 库 是 尤为 重要 的 (本 书 稍 































































































后 会 有 介绍 ) 。 
。HTML 页 面 的 代码 可 以 保持 简洁 ， 从 而 提 ite ey lg ie 
。 可 以 稍微 改善 一 点 性 能 。 浏 览 器 会 把 包含 文件 ; 缓存 ， 当 前 页 面 
或 其 他 页 面 再 次 需 使 用 这 个 文件 时 ， 就 可 以 直接 从 内 容 读 取 了 。 















































































































































外 部 文件 里 不 能 使 用 <script> 和 </script> 标 签 ， 也 不 能 使 用 任何 HTML 标 签 ， 只 能 是 纯粹 的 
JavaScript 代 码 。 
























































程序 清单 2.1 是 第 1 章 里 Web 页 面 的 代码 ， 修 改 为 在 <body> 区 域 里 包 
含 了 一 个 JavaScript 代 码 文件 。JavaScript 可 以 放置 到 HTML 页 面 的 <head> 
或 <body> 区 域 里 ， 但 一 般 情 况 下 ， 我 们 把 JavaScript 代 码 放 到 页 面 的 
<head> 区 域 ， 从 而 让 文档 的 其 他 部 分 能 够 调用 其 中 的 函数 。 第 3 章 将 介 
绍 函数 的 有 关内 容 。 就 目前 而 言 ， 我 们 把 范例 代码 暂时 放 到 文档 的 
<body> 区 域 。 















































































































































程序 清单 2.1 包含 了 JavaScript 文 件 的 HTML 文 档 





<!DOCTYPE html> 
<html> 
<head> 
<title>A Simple Page</title> 
</head> 
<body> 
<p>Some content ...</p> 
<script src='mycode.js'></script> 
</body> 
</html> 


当 JavaScript 代 码 位 于 文档 的 body 区 域 时 ， 在 页 面 被 呈现 让 
些 代 码 就 会 解释 和 执行 ， 然 后 继续 完成 页 面 的 其 他 内 容 。 


























有 时 在 <script> 标 签 里 可 以 看 到 HTML 风格 的 注释 标签 <!-- 和 -->， 比 如 : 








<script> 
<!-- 
„JavaScriptiä... 
--> 

</script> 








这 是 为 了 兼容 不 能 识别 <script> 标 签 的 老 版 本 浏览 器 。 这 种 “注释 "方式 可 以 防止 老 版 本 浏 
览 器 把 JavaScript 源 代码 当 作 页 面 内 容 显示 出 来 。 除 非 我 们 有 特别 明确 的 需求 要 支持 老 版 本 的 
浏览 器 ， 和 否则 是 不 需要 使 用 这 种 技术 的 。 



































2.2 ” JavaScript 语句 





= 


JavaScript 程 序 是 由 一 些 单独 的 指令 组 成 的 ， 这 些 指令 被 称 为 “ 语 
句 ”。 为 了 能 够 正确 地 解释 浏览 器 对 语句 的 书写 方式 有 所 要 求 。 
第 一 种 方式 是 把 每 个 语句 一 





















































语句 1 
语句 2 

















男 一 种 方式 是 在 同一 行 里 书写 多 个 语句 ， 每 个 语句 以 分 号 表示 结 
Ro 














语句 1; 语句 2; 














为 了 提高 代码 的 可 读 性 ， 也 为 了 减少 无 意 中 造 成 的 语法 错误 ， 最 好 
是 结合 上 述 两 种 方式 的 优点 ， 也 就 是 一 行书 写 一 个 语句 ， 并 且 用 分 号 表 
示 语 句 结束 : 






































语句 1; 
语句 2; 











代码 注释 


有 些 语句 的 作用 并 不 是 为 了 让 浏览 器 执行 ， 而 且 为 了 方便 需要 阅读 
代码 的 人 。 我 们 把 这 些 语 句 称 为 “注释 "， 它 有 一 些 特定 的 规则 。 


长 度 在 一 行 之 内 的 注释 可 以 在 行 首 以 双 斜 线 表示 : 




















































































































// 注 释 内 容 



































如 果 需 要 用 这 种 方式 添加 多 行当 



































主 释 ， 需 要 在 每 一 行 的 行 首都 使 用 这 
个 前 级 : 
// 注 释 内 容 
// 注 释 内 容 





























实现 多 行 注释 的 更 简单 方法 是 使 | 



































注释 的 结束 。 其 中 的 注释 内 容 可 以 跨越 多 行 。 


JAER 主 释 的 








开始 ， 使 














j*/ 标 签 





过 








/* 这 里 的 注释 
内 容 可 以 跨越 
ZIT */ 





























JavaScript 还 可 以 使 用 HTML 注释 语 法 来 实现 间 





<-- 注释 内 容 --> 


单行 注释 : 





























但 我 们 一 般 不 在 JavaScript 中 使 用 这 种 方式 。 


















































后 阅读 代码 的 其 他 人 提供 指示 和 说 明 。 











注释 的 确 会 略微 增加 JavaScript 源 文件 的 大 小 ， 从 而 对 
般 来 说 ， 这 种 影响 小 到 可 以 忽略 不 计 ， 但 如 果 的 确 需 要 消 








JavaScript 文 件 里 的 全 部 注释 ， 形 成 所 谓 的 “运行 ?版 本 ， 


在 代码 里 添加 注释 是 一 种 非常 好 的 习惯 ， 特 别 
杂 的 JavaScript 程 序 时 。 注 释 不 仅 可 以 作为 我 们 自己 的 提示 ， 











Lo 


除 这 种 影响 ， 


























是 在 编写 较 大 、 较 复 


还 可 以 为 以 


页 面 加 载 时 间 产 生 不 好 的 影响 。 





我 们 可 以 清除 


实际 的 站 点 。 
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变量 可 以 看 作 一 种 被 命名 的 分 类 容器 ， 用 于 保存 特定 的 数据 。 数 据 
可 以 具有 多 种 形式 ;整数 或 小 数 、 字 符 串 或 其 他 数据 类 型 〈 本 章 稍 后 有 
所 介绍 ) 。 变量 可 以 | 任何 方式 进行 命名 ， 但 我 们 般 只 使 FEE, 数 
字 、 美元 符号 ($) 和 下 划 线 。 












































































































































JavaScript 是 区 分 大 小 写 的 ， 变 量 mypetcat 和 Mypetcat 或 MYPETCAT 是 不 一 样 的 。 


,JavaScript 程 序 : 员 和 其 他 很 多 程序 员 习惯 使 用 一 种 名 为 “驼峰 大 小 写 ”( 或 被 称 为 “混合 大 小 
等 ) 的 方法 ， 也 就 是 把 各 个 单词 或 短语 连 写 在 一 起 ， 没 有 空格 ， 每 个 单词 的 首 字 母 大 写 ， 
nem -个 字母 可 以 是 大 写 或 小 写 。 按 照 这 种 方式 ， 前 面 提 到 的 变量 就 应 该 命名 为 
MyPetCat 或 myPetCat。 


假设 有 个 变量 的 名 称 是 netPrice。 通 过 一 个 简单 的 语句 就 可 以 设 
保存 在 netPrice 里 的 数值 : 


netPrice = 8.99; 


这 个 操作 被 称 为 给 变量 “赋值 >。 有 些 编程 语言 在 赋值 之 前 必须 进行 
变量 声明 ，JavaScript 不 必 如 此 。 但 变量 声明 是 个 很 好 的 编程 习惯 ， 在 
JavaScript 里 可 以 这 样 做 ; 


var netPrice 
netPrice = 8.99; 


还 可 以 把 上 述 两 个 语句 结合 成 一 个 语句 ， 更 加 简洁 和 易 读 。 


var netPrice = 8.99; 
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放 到 一 对 单 引 





X 
Tn 














如 果 要 把 “字符 串 " 赋 值 给 一 个 变量 ， 需 要 把 
或 双 引 号 之 中 : 


var productName = "Leather wallet"; 
F 然后 就 可 以 传递 这 个 变量 所 保存 的 值 ， 比 如 传递 给 window.alert 方 
法 : 


alert(productName) ; 


生成 的 对 话 框 会 计算 变量 的 值 ， 然 后 显示 出 来 ， 如 图 2.1 所 示 。 























Javascript Alert 


Leather wallet 

















2.1 显示 变量 productName 的 值 














尽量 使 用 含义 明确 的 名 称 ， 比 如 productName 和 netPrice。 虽 然 像 var123 或 myothervar49 这 











四 样 的 名 称 也 是 合法 的 ， 但 前 者 显然 具有 更 好 的 易 读 性 和 可 维护 性 。 


2.4 操作 符 


如 果 不 能 通过 计算 操作 变量 里 保存 的 值 ， 那 么 这 些 值 的 作用 就 是 十 
分 有 限 的 。 


2.4.1 算术 操作 符 
首先 ，JavaScript 可 以 使 用 标准 的 算术 操作 符 进 行 加 、 减 、 乘 、 除 。 


var thesum = 4 + 3; 


显然 ， 前 面 这 个 语句 执行 之 后 ， 变 量 theSum 的 值 是 7。 在 运算 中 ， 
我 们 还 可 以 使 用 变量 名 称 : 


var productCount = 2; 

var subtotal = 14.98; 

var shipping = 2.75; 

var total = subtotal + shipping; 
Javascript 的 减法 (-) 、 乘 法 CO 和 除法 〈/) 也 是 类 似 的 : 

subtotal = total - shipping; 


var salesTax = total * @.15; 
var productPrice = subtotal / productCount; 


如 果 想 计算 除法 的 余数 ， 可 以 使 用 JavaScript 的 “ 模 ” 运 算 符 ， 也 就 


是 “%”; 

























































































































































































var itemsPerBox = 12; 
var itemsToBeBoxed = 40; 
var itemsInLastBox = itemsToBeBoxed % itemsPerBox; 








上 述 语句 运行 之 后 ， 变 量 itemsInLastBox 的 值 是 4。 


JavaScript 对 变量 值 的 增加 和 减少 有 快捷 操作 符 ， 分 别 是 (++) 和 


productCount++; 


上 述 语句 相当 于 : 
productCount = productCount + 1; 
类 似 地 ， 


1tems--; 
与 下 面 的 语句 作用 相同 : 

items = items - 1; 
关于 JavaScript 算 术 操 作 符 的 更 详细 介绍 请 见 附录 B。 


如 果 变 量 值 的 增加 或 减少 不 是 1， 而 是 其 他 数值 ，JavaScript 还 允许 把 算术 操作 符 与 等 号 结 
合 使 用 ， 比 如 += 和 -=。 


如 下 面 两 行 代码 的 效果 是 相同 的 : 














on 







































































total = total + 5; 
total += 5; 


下 面 两 行 也 是 一 样 : 


counter = counter - step; 


counter -= step; 


乘法 和 除法 算术 操作 符 也 可 以 这 样 使 


price = price * uplift; 




















price *= uplift; 


2.4.2 ”操作 符 优先 级 


在 一 个 计算 中 使 用 多 个 操作 符 时 ，JavaScript 根 据 “ 优 先 级 规则 ?来 确 
定 计算 的 顺序 。 比 如 下 面 这 条 语句 : 


var average =at+tbt+ece/ 3; 
根据 变量 的 名 称 ， 这 应 该 是 在 计算 平均 数 ， 但 这 个 语句 不 会 得 到 我 
们 想 要 的 结果 。 在 与 Alb 相 加 之 前 ， c 会 先进 行 除法 运算 。 为 了 正确 地 
计算 平均 数 ， 需 要 添加 一 对 括号 ， 像 下 面 这 样 : 
var average = (a + b + c) / 3; 


如 果 对 于 运算 优先 级 不 是 十 分 确定 ， 我 们 建议 使 用 括号 。 这 样 做 
不 需要 什么 额外 的 代价 ， 不 仅 能 够 让 代码 更 易 读 (无 论 是 编写 者 本 人 还 




















































































































要 查看 代码 的 其 他 人 ) ， 还 能 避免 优先 级 影响 运算 过 程 。 
| WH: 
对 于 有 PHP 或 Java 编 程 经 验 的 读者 来 说 ， 可 以 发 现 JavaScript 的 操作 符 优 先 级 规则 与 它们 基 


| 本 是 一 样 的 。 关 于 JavaScript 操 作 符 优先 级 的 详细 说 明 请 见 : http://msdn.microsoft.com/en- 
| us/library/z3ks45k7(v=vs.94).aspx o 
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当 变 量 保存 的 是 字符 串 而 不 是 数值 时 ， 算 术 操 作 符 基 本 上 就 没有 什 
么 意义 了 ， 唯 一 可 用 的 是 操作 符 “+”。JavaScript 把 它 用 于 两 个 或 多 个 字 
符 串 的 连接 (按照 顺序 组 合 〉: 






















































































var firstname="John"; 

var surname="Doe"; 

var fullname=firstname+" "+surname; 
// 变 量 fullname 里 的 值 是 "John Doe" 









































时 和 一 个 数值 变量 ，JavaScript 
连接 起 来 。 


var name = "David"; 
var age = 45; 
alert(name + age) 


2.2 所 示 是 一 个 字符 串 变 量 和 一 个 数值 变量 使 用 操作 符 “+” 的 结 











如 果 把 操作 符 “+” 用 于 一 个 字符 串 变 
会 把 数值 转换 为 字符 串 ， 再 把 两 个 字符 呈 





at i 
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果 。 


+ Javascript Alert ~ * 


David45 





图 2.2 连接 一 个 字符 串 和 一 个 数值 








本 书 的 第 5 章 将 会 更 详细 地 讨论 JavaScript 的 数据 类 型 和 字符 串 操 








实践 
把 摄氏 度 转换 为 华氏 度 











把 扰 氏 度 转换 为 华氏 度 的 方法 是 把 数值 乘 9， 除 以 5， 然 后 加 32。 用 JavaScript 可 以 这 样 
做 : 














var cTemp=166; ”// 摄 氏 度 
// 在 表达 式 里 充分 使 用 括号 
var hTemp=((cTemp*9)/5)+32; 











实际 上 ， 我 们 可 以 省 略 代码 里 的 括号 ， 结 果 也 是 正确 的 : 


var hTemp = cTemp*9/5 + 32; 


J 






































然而 使 用 括号 可 以 让 代码 更 易 懂 ， 而 且 有 助 于 避免 操作 符 优 先 级 可 能 导致 的 问题 。 
让 我 们 在 页 面 里 测试 上 述 代 码 。 




















程序 清单 2.2 摄氏 度 转换 为 华氏 度 








<!DOCTYPE html> 


<html> 
<head> 
<title>Fahrenheit From Celsius</title> 
</head> 
<body> 
<script> 
var cTemp = 100; // temperature in Celsius 
// Let's be generous with parentheses 
var hTemp = ((cTemp * 9) /5 ) + 32; 
document.write("Temperature in Celsius: " + cTemp + " 
degrees<br/>"); 
document.write("Temperature in Fahrenheit: " + hTemp + " 
degrees"); 
</script> 
</body> 
</html> 


把 这 段 代 码 保存 到 文件 temperature.html， 加 载 到 浏览 器 ， 应 该 能 够 看 到 如 图 2.3 所 示 的 


zH 





$e deste ison Dil x 


© -> © @ [O file///nome/phil/sams/ozlistingoz.html y| (© fle//fhome/phi/Sams/ozistingoa.html S html 





Temp in Celsius: 100 degrees 
Temp in Fahrenheit: 212 degrees 





2.3 ”程序 清单 2.2 的 输出 结果 
编辑 代码 文件 ， 给 cTemp 设 置 不 同 的 值 ， 每 次 都 应 该 能 够 得 到 正确 的 结果 。 











2.5 捕获 鼠标 事件 
































































































































































































































































































































































































































og 兽 加 与 ] 户 的 交互 是 JavaScript 的 基本 功能 。 为 此 ， 我 们 

一 些 机 制 来 检测 用 户 和 程序 在 村 定时 间 在 做 什么 bein BR 在 浏览 

时 位 置 ， 用 户 是 否 点 击 了 鼠标 或 按 了 按键 ， 页 面 是 否 完 整 加 载 到 
浏览 器 ， 等 等 。 

这 些 发 生 的 事情 ， 我 们 称 之 为 事件”， JavaScript 提 供 了 多 种 工具 来 
操作 它们 。 第 9 章 将 详细 介绍 事件 有 处 蛙 事 件 的 高 级 技术 ， 现 在 先 来 看 
看 利用 JavaScript 检 测 | 户 鼠 标 动作 的 些 方法 。 

JavaScript 使 用 “事件 处 理 器 ”来 处 理事 件 ， 本 章 介 绍 其 中 的 3 个 : 
onClick, onMouseOver#llonMouseOut. 

2.5.1 onClick 事件 处 理 器 

onClick 事 件 处 理 器 几乎 可 以 用 于 页 面 上 任何 可 见 的 HTML 元 素 。 使 
用 它 的 方式 之 一 是 给 HTML 元 素 添 加 一 个 属性 : 
onclick=".. 一 些 JavaScript 语 句 ..." 

虽然 给 HTML 元 素 直接 添加 事件 处 理 器 是 完全 可 行 的 ， 但 目前 已 经 不 认为 这 是 个 好 的 编程 

方式 了 。 本 书 的 第 一 部 分 仍然 会 使 用 这 种 方式 ， 但 后 面 的 章节 里 会 介绍 更 强大 、 更 灵活 的 方 
ES 日 事件 处 理 器 。 

先 来 看 一 个 范例 ， 如 程序 清单 2.3 所 示 。 




















onClick 事 件 处 理 器 





程序 清单 2.3 使 





<!DOCTYPE html> 
<html> 
<head> 
<title>onClick Demo</title> 
</head> 
<body> 
<input type="button" onclick="alert('You clicked the button!')" 
value="Click Me" /> 
</body> 
</html> 


上 述 HTML 代 码 在 页 面 的 pody 区 域 添 加 一 个 按钮 ， 并 且 设 置 了 它 的 
onClick 属 性 ， 从 而 在 它 被 点 击 时 运行 相应 的 JavaScript 代 码 。 当 用 户 点 
击 这 个 按钮 时 ，onClick 事 件 被 激活 〈 通 常 称 为 “被 触发 ") ， 然 后 属性 中 
所 包含 的 JavaScript 语 句 被 执行 。 

本 例 中 只 有 一 个 语句 : 
alert('You clicked the button!') 


图 2.4 是 单 击 这 个 按钮 得 到 的 结果 。 
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Javascript Alert 


i You clicked the button! 











2.4 使 用 onClick 事 件 处 理 器 























也 许 有 人 注意 到 了 ， 我 们 称 这 个 事件 处 理 器 为 onClick， 而 在 HTML 元 素 里 添加 它 时 却 使 
小 写 的 onclick。 这 是 因为 HTML 是 不 区 分 大 小 写 的 ， 而 XHTML 是 区 分 大 小 写 的 ， 并 且 要 求 
全 部 的 HTML 元素 及 属性 名 称 都 使 用 小 写字 母 。 






















































































2.5.2 “onMouseOver 和 onMouseOut 事 件 处 理 器 




















如 果 需 要 检测 鼠标 指针 与 特定 页 面 元 素 的 位 置 关 系 ， 可 以 使 
onMouseOver 和 onMouseOnut 事 件 处 理 器 。 


当 鼠 标 进 入 页 面 上 某 个 元 素 占据 的 区 域 时 ， 会 触发 onMouseOver 村 
件 。 而 onMouserOut 事 件 ， 很 显然 是 在 鼠标 离开 这 一 区 域 时 触发 的 。 
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程序 清单 2.4 示 范 了 一 个 简单 的 onMouseOver 事 件 处 理 过 程 。 




















程序 清单 2.4 ”使 用 onMouseOver 事 件 处 理 器 











<!DOCTYPE html> 
<html> 
<head> 
<title>onMouseOver Demo</title> 

</head> 
<body> 

<img src="image1.png" alt="image 1" onmouseover="alert('You entered 
the image!')" /> 
</body> 
</html> 
图 2.5 展 示 了 上 述 代码 的 执行 结果 。 如 果 把 程序 清单 2.4 里 的 


onmouseover 蔡 换 为 onmouseout， 就 会 在 鼠标 离开 图 像 区 域 〈 而 不 是 进 
入 ) 时 触发 事件 处 理 器 ， 从 而 弹出 警告 对 话 框 。 
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ad Javascript Alert ax 


You entered the image! 


























图 2.5 使 








onMouseOver 事 件 处 理 器 








实现 图 像 变 化 























利用 onMouseOver 和 onMouseOnut 寻 
显示 方式 。 为 此 ， 当 鼠标 进入 图 像 区 域 时 ， 



































性 ; 而 当 鼠 标 
ANa 


<!DOCTYPE htm 


<html> 
<head> 


离开 时 ， 利 





onMouseO 





实践 





和 件 处 理 器 可 以 在 鼠标 位 于 











像 上 方 时 ， 改 变 图 像 的 




















可 以 利 

















ut 再 把 这 个 属性 修改 回来 。 
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程序 清单 2.5 利 











<title>OnMouseOver Demo</title> 


</head> 
<body> 


onMouseOver 改 变 <img> 元 素 的 src 属 
代码 如 程序 清单 2.5 所 


onMouseOver 和 onMouseOut 实 现 























像 变化 





<img src="tick.gif" alt="tick" onmouseover="this.src='tick2.gif';" 
onmouseout="this.src='tick.gif';" /> 
























































































































































</body> 
</html> 
上 述 代码 中 出 现 了 一 些 新 语法 ， 在 onMouseOver 和 onMouseOut 的 JavaScript 语 句 中 ， 使 
了 关键 字 this。 
当 事 件 处 理 器 是 通过 HTML 元 素 的 属性 添加 到 页 面 时 ， 其 中 的 this 是 指 HTML 元 素 本 
身 。 本 例 中 就 是 <“ 当前 图 像 ”，this.src 就 是 指 这 个 图 像 对 象 的 src 属 性 。 
本 例 中 使 用 了 两 个 图 像 : tick.gif 和 tick2.gif。 当 然 可 以 使 用 任何 可 用 的 图 像 ， 但 为 了 
达到 最 佳 效 果 ， 两 个 图 像 最 好 具有 相同 尺寸 ， 而 且 文件 不 要 太 大 。 
使 用 编辑 软件 创建 一 个 HTML 文 件 ， 包 含 程序 清单 2.5 所 示 的 代码 。 可 以 根据 实际 情况 
修改 图 像 文 件 的 名 称 ， 但 TEE 的 图 像 与 HTML 文 件 位 于 同一 个 目录 里 。 保 存 
HTML 文 件 并 且 在 浏览 器 里 打开 它 











我 们 应 该 可 以 看 到 鼠标 指针 进入 时 


2.6 所 示 。 

































































像 改变 ， 当 指针 离开 
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像 恢复 原样 ， 如 























Rollover Demo - Chromium 





© Pollover Demo 


和 +x 
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Rollover Demo - Chromium 
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d @ Rollover Demo 


a - +x 








IN € 


C ft | @ file:///nome/phil/SAMS/rollover.htm| 安国 OO 
































2.6 Ail 








jonMouseOver 和 和 onMouseOut 实现 的 





这 曾经 是 
onMouseOver 和 onMouseOut 事 件 处 理 器 的 简洁 方式 。 























像 变 化 





像 变 化 的 经 典 方式 ， 现 在 已 经 被 更 高 效 的 “ 层 合 样式 表 ”(CSS) 取代 了 ， 但 它 仍 不 失 为 展示 








2.6 ”小结 
本 章 的 内 容 相当 
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TT 
m} 


























首先 是 在 HTML 页面 里 添加 JavaScript 代 码 的 不 同方 式 。 



































人 


















































最 后 是 JavaScript 的 一 些 事件 处 理 器 ， 展 示 如 何 检测 用 户 鼠 标的 特定 
行为 。 


2.7 问答 


问 : 在 程序 清单 和 片段 里 ， 有 时 把 <script> 开 始 和 结束 标签 写 在 一 
行 里 ， 有 时 写 在 不 同 的 行 ， 这 有 什么 区 别 吗 ? 









































































































































答 : 空格 、 制 表 符 和 空 行 这 类 空白 内 容 在 JavaScript 里 是 完全 被 忽 
略 的 。 我 们 可 以 利用 这 些 空白 调整 代码 的 布局 ， 使 它们 更 容易 理解 。 



























































i: 是 否 能 使 用 同一 个 <script> 元 素来 引用 外 部 JavaScript 文 件 
同时 包含 JavaScripti 语 句 ? 






































B: 不行。 如 果 利 用 <script> 元 素 的 src 属 性 包含 了 外 部 JavaScript 文 
件 ， 就 不 能 在 <script> 和 </script> 之 间 包 含 JavaScript 语 名 了， 而 是 必须 为 
空 。 














28 作业 


请 先 回答 问题 ， 再 参考 后 面 的 答案 。 


2.8.1 





























测验 








1. 什么 是 onClick 事 件 处 理 器 ? 
a. 检测 鼠标 在 浏览 器 里 位 置 的 


2.8.2 




































































b. 














里 允许 有 几 个 <script> 元 素 ? 





仅 1 个 
任意 数量 























个 对 象 


自 应 用 户 点 击 鼠 标 动 作 时 执行 的 脚本 


用 户 能 够 点 击 的 一 个 HTML 元 素 


变量 ， 下 列 哪个 说 法 是 不 正确 的 ? 








a. 


b. 


Ci: 


. 选 b。 
. ico 
. 选 c。JavaScript 的 变量 名 称 不 能 包含 空格 。 





名 称 是 区 分 大 小 写 的 
可 以 保存 数值 或 非 数 值 信息 
名 称 里 可 以 包含 空格 


















































1 At dey, onClick 


可 以 根据 需 


























> 








有 件 被 触发 。 





使 用 多 个 <script> 元 素 。 


2.9 ”练习 
从 程序 清单 2.4 入 手 ， 删 除 <img> 元 素 里 的 onMouseOver 和 

















re 





onMouseOut 事 件 处 理 器 ， 添加 onClick 事 件 处 理 器 ， 把 图 像 的 title 属 性 i 




















置 为 My New Title, 提示 : 利用 this.title 可 以 访问 图 像 的 title 属 性 。 
























































有 什么 办 法 可 以 方便 地 确定 脚本 正确 地 设置 了 新 的 图 像 标 题 ? 

















se ”使 用 函数 


本 章 主要 内 容 包 括 : 


如 何 定义 函数 
如 何 调用 (执行) 函数 
pk 可 接收 数据 

从 函数 返回 值 
变量 的 作用 域 


很 多 情况 下 ， 程 序 在 执行 过 程 中 会 反复 完成 相同 或 类 似 的 任务 ， 为 
了 避免 多 次 重复 编写 相同 的 代码 段 ， JavaScript 把 部 分 代码 包装 为 能 够 重 
使 用 的 模块 ， 称 为 “函数 ”。 函 数 可 以 在 程序 的 其 他 部 分 使 用 ， 就 像 它 
是 JavaScript 语 言 的 组 成 部 分 一 样 。 


使 用 函数 可 以 让 代码 更 加 易 读 和 维护 。 举 例 来 说 ， 我 们 编写 了 一 个 
计算 货运 成 本 的 程序 ， 当 税率 或 公路 运费 改变 时 ， 就 需要 修改 脚本 ， 如 
果 不 使 用 函数 ， 这 可 能 涉及 多 达 50 处 执行 计算 的 代码 。 在 这 个 修改 过 程 
中 ， 就 很 可 能 漏 掉 某 些 部 分 ， 从 而 导致 错误 的 发 生 。 如 果 这 些 计 算 都 被 
集中 到 几 个 函数 中 ， 然 后 在 程序 中 使 用 ， 那 么 就 只 需要 修改 这 几 个 函 
数 ， 其 结果 会 作用 于 整个 程序 。 


函数 是 JavaScript 的 基本 模块 之 一 ， 几 乎 会 出 现在 每 个 脚本 中 。 本 章 
将 介绍 如 何 创 建 和 使 用 函数 。 
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3.1 基本 语法 


部 分 使 用 。 



































下 面 是 创建 函数 的 基本 语法 : 


创建 函数 就 好 像 是 创建 一 个 新 的 JavaScript 命 令 ， 能 


Vs, Ae 











够 在 脚本 的 其 他 











} 








function sayHello() { 








alert("Hello"); 
//. 其 他 语句 .… 














首先 是 关键 字 是 function， 接 着 是 函数 的 名 称 ， 后 面 




































































写 里 面 是 构成 函数 的 JavaScript 语 句 。 在 





紧 跟着 一 对 





pan 





























括号 ， 然 后 是 一 对 花 括 号 。 花 括号 : 
前 面 这 个 例子 里 只 有 一 行 代 码 ， 用 于 弹出 gees 
据 需 要 添加 任意 数量 的 代码 来 实现 函数 的 功能 











关键 字 function 必 须 是 小 写 的 ， 否 则 会 产生 错 i 


为 了 让 代码 更 整洁 ， 可 以 在 一 个 <script> 元 素 里 创建 





误 。 
































我 们 可 以 根 





个 函数 。 


<script> 
Function doThis() { 
alert("Doing This"); 
} 
Function doThat() { 
alert( "Doing That"); 
} 


ee 


函数 名 称 与 变量 名 称 一 样 ， 是 区 分 大 小 写 的 ， 如 函数 MyFuncO 与 nyFuncO 是 不 同 的 。 与 
变量 名 称 一 样 ， 使 用 含义 明确 的 函数 名 称 可 以 提高 代码 的 易 读 性 。 

















3.2 调用 函数 











人 包含 在 函数 定义 





被 < 调 





"时 执行 



































va} 
































地 方 执行 函数 的 代码 ; 


sayHello() 








sayHello(): 


区 域内 的 代码 不 会 被 执行 ， 而 是 在 





甬 数 只 需要 使 用 函数 名 称 〈 以 及 一 对 括号 ) ， 就 可 以 在 需要 的 























举例 来 说 ， 可 以 在 按钮 的 onClick 事 件 处 理 器 里 调用 函数 





<input type="button" value="Say Hello" onclick="sayHello()" /> 


| ae 


本 书 前 面 的 内 容 里 展示 了 不 少 使 


























JavaScript 对 象 方法 





内 代码 ， 比 如 document.write() 或 




















window.alert(). “方法 ?实际 上 就 是 属于 特定 类 的 函数 。 关 于 对 象 的 更 详细 介绍 请 见 第 4 章 。 


把 JavaScript 代 码 放 置 到 页 面 的 <head> 区 域 











U 
让 
= 





<body> 
b 就 是 ] 











前 为 止 ， 我 们 的 范例 


都 把 JavaScript 








代码 放置 到 HTML 页 面 的 























区 域 。 为 了 更 好 地 发 挥 函数 的 作用 ， 














巴 JavaScript 代 码 放 置 到 页 面 的 <head> 











<head> 





的 src 属 1 
函数 放 到 

















区 域 的 <script> 元 素 里 ， 





或 是 位 于 页 面 


我 们 要 采取 更 适当 的 方式 ， 











区 域 。 当 函数 位 于 页 面 
<head> 区 域 的 <script> 元 素 


























生 所 指向 的 外 部 文件 时 ， 
文档 的 head 部 分 能 够 确保 它们 在 被 1 
































已 就 可 以 从 页 面 的 任何 位 置 被 调用 。 把 
































程 


这 清单 3.1 展 示 了 一 个 范例 。 














周 用 前 已 经 被 定义 了 。 











旦 序 清单 3.1 ”位 于 页 面 <head> 区 域 的 函数 








<!DOCTYPE html> 
<html> 
<head> 
<title>Calling Functions</title> 
<script> 
function sayHello() { 
alert("Hello"); 
} 
</script> 
</head> 
<body> 
<input type="button" value="Say Hello" onclick="sayHello()" /> 
</body> 
</html> 


在 这 段 代码 里 ， 可 以 看 到 函数 定义 位 于 页 面 <head> 区 域 的 <script> 
元 素 里 ， 而 函数 的 调用 则 位 于 完全 不 同 的 位 置 ， 本 例 是 页 面 <body> 区 域 
里 按钮 的 onClick 事 件 处 理 程 序 。 


点 击 按钮 后 的 结果 如 图 3.1 所 示 。 






















































































@calingFunctions x \S 
& CG fi @ file:///nome/phil/SAMS/O3listingO1.F yy Oga 


Ly 





- Javascript Alert 


i Hello 


























图 3.1 调用 JavaScript 函 数 





3.3 BA 














操作 ， 那 么 其 应 
































就 会 受 3 

















到 很 大 的 局 限 。 














好 在 我 们 可 









































是 在 调 用 函数 时 








个 或 多 个 “参数 ” 


以 通过 向 函数 传递 数据 来 扩展 函数 的 功能 ， 
给 它 传递 一 


如 果 函 数 只 是 像 前 H TH 范例 中 那样 在 每 次 调用 时 只 能 实现 完成 相同 的 


其 实现 方法 


functionName (arguments) 


下 面 是 一 个 


简单 的 函数 ， 可 以 计算 一 个 数 的 立方 
































显示 结果 : 





function cube(x) { 
alert(x * x * x); 











现在 来 调用 这 个 函数 ， 











样 的 : 





cube(3) 


框 里 会 显示 计算 的 结果 ， 本 例 就 是 27。 


得 到 的 对 话 






































用 一 个 数值 来 代替 其 中 的 x 。 


调 有 

















a 


方式 是 这 


当然 ， 我 们 还 可 以 传递 一 个 变量 作为 参数 。 下 面 的 代码 也 会 显示 一 
个 对 话 框 ， 其 中 显示 数值 27: 








var length = 3; 
cube(length) ; 


多 参数 


函数 不 只 能 接收 一 个 参数 。 在 使 用 多 个 参数 时 ， 只 需要 使 用 和 
隔 它们 就 行 了 : 












































(a 
qu 
> 











function times(a,b) { 
alert(a*b); 


} 
times(3,4);  // 显 示 12 














根据 需要 可 以 使 用 任意 多 个 参数 。 

















函数 时 ， 要 确保 包含 了 与 函数 定义 相 匹配 的 参数 数量 。 如 果 函 数 定 义 里 的 某 个 参 
eC FI (HL, JavaScript" [能 会 报告 错误 ， 或 是 函数 执行 结果 不 正确 。 如 果 调 用 函数 时 传 
了 过 多 的 参数 ，JavaScript 会 忽略 多 出 来 的 参数 。 


需要 明确 的 是 ， 函 数 定义 中 参数 的 名 称 与 传递 给 函数 的 变量 名 称 没 

J 任何 关系 。 参 数列 表 里 的 名 称 就 是 占 位 符 ， 用 于 保存 函数 被 调用 时 传 

BAL eS, 这 些 参数 的 名 称 只 会 在 函数 定义 内 部 使 用 ， 实 现 函 数 
功能 。 


本 章 稍 后 在 讨论 变量 “作用 域 " 时 会 有 更 详 









































































































































AN> 


的 介绍 。 





























输出 消息 的 函数 


现在 我 们 利用 已 经 学 到 的 知识 来 创建 一 个 函数 ， 当 用 户 点 击 按钮 时 ， 向 用 户 发 送 关 于 
按钮 的 信息 。 这 个 函数 放 在 页 面 的 <head> 区 域 ， 具 有 多 个 参数 。 




































































这 个 函数 的 代码 如 下 : 





function buttonReport(buttonId, buttonName, buttonValue) { 
// 按 钮 id 信 息 
var userMessage1="Button id: "+ buttonId+"\n"; 
// 按 钮 名 称 
var userMessage2="Button name: "+buttonName+"\n"; 
// 按 钮 值 
var userMessage3="Button value: "+buttonValue; 
// 提 醒 用 户 


alert (userMessage1+userMessage2+userMessage3) ; 











函数 buttonReport 县 有 三 个 参数 ， 分 别 是 被 点 击 按钮 的 id、name 和 value。 根 据 这 些 三 
个 参数 ， 函 数组 成 简短 的 信息 ， 然 后 把 三 段 信息 组 合成 一 个 字符 串 ， 传 递 给 alert() 方 法 ， 
从 而 在 对 话 框 里 进行 显示 。 
提示 : 

从 代码 中 可 以 看 到 ， 前 两 条 消息 的 末尾 添加 了 "\n"， 这 是 表示 “新 行 * 的 字符 ， 能 够 让 对 话 框 里 的 文本 另 起 
一 行 ， 从 左 侧 开始 显示 。 在 字符 串 里 ， 像 这 样 的 特殊 字符 如 果 想 要 发 挥 正确 的 功能 ， 必 须 以 “* 作 为 前 级 。 这 种 
具有 前 绷 的 字符 被 称 为 “ 转 义 序列 "， 更 详细 的 介绍 请 见 第 4 章 。 

为 了 调用 这 个 函数 ， 我 们 在 HTML 页 面 上 放置 一 个 按钮 ， 并 且 定 义 它 的 id、name 和 
value 属 性 : 
<input type="button" id="idi" name="Button 1" value="Something" /> 


接着 添加 一 个 onClick 事 件 处 理 器 ， 从 中 调用 我 们 定义 的 函数 。 这 里 又 要 用 到 关键 字 

























































































this: 
onclick = "“buttonReport(this.id, this.name, this.value)' 
完整 的 代码 如 程序 清单 3.2 所 示 。 




















程序 清单 3.2 调用 多 个 参数 的 函数 

















<!DOCTYPE html> 


<html> 
<head> 
<title>Calling Functions</title> 
<script> 
function buttonReport (buttonId, buttonName, buttonValue) { 
// information about the id of the button 
var userMessage1 = "Button id: " + buttonId + "\n"; 
// then about the button name 
var userMessage2 = "Button name: " + buttonName + "\n"; 
// and the button value 
var userMessage3 = "Button value: " + buttonValue; 
// alert the user 
alert(userMessage1 + userMessage2 + userMessage3) ; 
} 
</script> 
</head> 
<body> 
<input type="button" id="id1" name="Left Hand Button" value="Left" 
onclick = "buttonReport(this.id, this.name, this.value)"/> 
<input type="button" id="id2" name="Center Button" value="Center" 
onclick = "buttonReport(this.id, this.name, this.value)"/> 
<input type="button" id="id3" name="Right Hand Button" value="Right" 
onclick = "buttonReport(this.id, this.name, this.value)"/> 
</body> 
</html> 











利用 编辑 软件 创建 文件 button.html， 输 入 上 述 代 码 。 它 的 运行 结果 类 似 于 图 3.2 所 示 ， 
有 具体 的 输出 内 容 取决 于 点 击 了 哪个 按钮 。 





























@ Calling Functions 


E > C fi | © flle: ATATA © file:///home/phil/SAMS/03listing02.F Y% Bog x 








3.4 ”从 函数 返回 值 

前 面 介绍 了 如 何 向 函数 传递 参数 ， 让 函数 对 这 些 数据 进行 处 理 。 那 
么 ， 如 何 从 函数 获得 数据 呢 ” 毕 竞 ， 我 们 不 能 只 通过 弹出 对 话 框 来 获得 
函数 的 结果 。 


从 函数 调用 获得 数据 的 机 制 是 “返回 值 "， 其 工作 方式 如 下 所 示 : 


function cube(x) { 
return x * xX * X; 



































































































































这 个 函数 里 没有 使 用 alert0 对 话 框 ， 而 是 在 需要 获取 的 结果 前 面 使 
用 了 关键 字 return。 为 了 在 函数 外 部 得 到 这 个 值 ， 只 需要 把 函数 返回 的 
值 赋 了 予 一 个 变量 : 


var answer = cube(3); 


J 




































































现在 变量 answer 包 含 的 数值 是 27。 




















函数 返回 的 值 不 一 定 是 数值 ， 而 是 可 以 返 


五 





avaScript 支 持 的 任何 数据 类 型 ， 详 情 请 见 第 5 











当 函 数 返 回 一 个 值 时 ， 我 们 可 以 利用 函数 调用 把 返回 的 值 直接 传递 给 男 一 个 语句 ， 比 如 
下 面 的 代码 : 
























































var answer=cube(3); 
alert(answer); 











可 以 简单 地 写 为 : 











alert(cube(3)); 




















函数 调用 cube(3) 的 返 











H| 





值 27 直 接 成 为 传递 给 alert() 方 法 的 参数 。 








3.5 


前 面 


变量 作用 域 


已 经 介绍 过 如 何 使 
































时 了 有 


“函数 内 
这 种 限制 被 称 为 变量 的 “ 作 


条 最 重要 的 原由 
部 声明 的 变量 只 存在 于 





We Be Sf f: 


关键 var" HAE 





























函数 内 部 。” 


























域 ”。 





来 看 


下 面 这 个 范例 : 





量 。 在 函数 里 声明 变量 


图 








retu 


} 
// 调 




















alert(in 
alert(to 





// 定 义 函 数 addTax() 
function addTax(subtotal, taxRate) { 
var total=subtotal*(1+(taxRate/10@) ); 


rn total; 


这 个 函数 
var invoiceValue=addTax(50,10) ; 
ILE% 


voiceValue); 
tal); // 不 工作 
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运行 上 述 
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AF 1) 














的 值 〈 应 该 是 55， 但 可 外 
们 没有 让 JavaScript 对 结 果 

之 后 ， 我 
会 生成 一 
置 〈 本 书 稍 后 会 更 详 
JavaScript 都 不 
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这 是 
变量 total 就 是 不 存在 





个 错误 ， 而 我 
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门 并 不 会 看 到 alert() 对 话 框 显示 变量 


个 alert() 对 话 框 显示 变量 


到 类 似 55.000 000 01 这 样 的 数值 ， 
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的 值 。 


= total 
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因为 变量 


= total 














的 声明 


这 个 错误 
绍 有 关 错 误 处 理 
量 total 值 的 alertO 对 Tre. 


是 在 addTax() 





的 问题 
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函数 内 部 i 





KY (JavaScript iB i 





i 是 “未 定义 的 ”) 
































关键 字 return 返 
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的 只 是 变量 














total 4 











一 个 变量 























invoice Value. 


保存 的 值 ， 然 后 这 个 





对 为 我 











JavaScript 


取决 于 浏览 器 的 设 
， 但 无 论 如 何 ， 





行 的 ， 在 函数 之 


。 范 例 中 利 
值 被 保存 到 另 



































我 们 


把 函数 内 部 定 





义 的 变量 称 为 “ 














个 “局 部 





司 部 ”变量 ， 











也 就 是 属于 E 





























”。 函数 之 外 声 

















可 以 使 





j 相 同 的 名 称 ， 








明 的 变量 称 为 “ 











全 局 "变量 。 全 局 变量 




















昌 仍 然 是 不 同 的 变量 ! 
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变量 能 够 使 用 的 范围 称 为 变量 的 “作用 域 "， 因 此 可 以 称 一 个 变 
局 部 作用 域 ”或 “全 局 作用 域 ”。 
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变量 作用 域 示范 














为 了 说 明 变 量 的 作用 域 ， 来 看 下 面 这 段 代 码 : 














var a=10; 

var b=10; 

function showVars() { 
var a=20; // 声 明 一 个 新 的 局 部 变量 a 
b=28; ”// 改 变 全 局 变量 b 的 值 
return"Local variable'a' = "+a+"\nGlobal variable'b'="+b; 

t 

var message=showVars() ; 

alert(message+"\nGlobal variable'a'="+a) ; 








函数 showVars0 操 作 了 两 个 变量 : a 和 b 。 变 量 a 是 在 函数 内 部 定义 的 ， 它 是 个 局 部 变 
量 ， 仅 存在 于 函数 内 部 ， 与 脚本 一 开始 定义 的 全 局 变量 〈 名 称 也 是 a ) 是 完全 不 同 的 。 


变量 b 不 是 在 函数 内 部 而 是 在 外 部 定义 的 ， 它 是 个 全 局 变量 。 


























程序 清单 3.3 是 把 上 述 代码 放置 于 HTML 页 面 的 结果 。 














程序 清单 3.3 全 局 和 局 部 作用 域 























<!DOCTYPE html> 


<html> 
<head> 
<title>Variable Scope</title> 
</head> 
<body> 
<script> 
var a = 10; 
var b = 10; 
function showVars() { 
var a = 20; // declare a new local variable 'a' 
b = 20; // change the value of global variable 'b' 
return "Local variable 'a' = " + a + "\nGlobal variable 
=" + b; 
} 
var message = showVars(); 
alert(message + "\nGlobal variable 'a' = " + a); 
</script> 
</body> 
</html> 














‘b! 


当 页 面 加 载 之 后 ，showVars() 函 数 返 回 一 个 消息 字符 串 ， 其 中 包含 了 两 个 变量 (a 和 b 



























































) 在 函数 内 部 被 更 改 之 后 的 信息 。 这 里 的 a 具有 局 部 作用 域 ，b 具有 全 局 作用 域 。 
之 后 ， 全 局 变量 a 的 当前 值 也 附加 到 这 个 消息 之 后 ， 完 整地 显示 给 用 户 。 
把 上 述 代码 保存 到 scope.html， 用 浏览 器 加 载 它 ， 得 到 的 结果 如 图 3.3 所 示 。 










































































© Variable Scope 


E >X fi © file: i ‘© file:///home/phil/SAMS/O3listingo3.r Y Bog x 








3.6 ”小结 














本 章 介绍 了 什么 是 函数 ， 如 何 创建 函数 ， 如 何 从 代码 中 调用 函数 并 
以 参数 方式 向 其 传递 数据 ， 以 及 如 何 从 函数 向 调用 语句 返回 数据 。 
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最 后 ， 本 章 介 绍 了 变量 的 局 部 作用 域 和 全 局 人 
域 如 何 影响 函数 对 变量 的 操作 。 











用 域 ， 以 及 变量 的 作 





3.7 问答 




















部 能 够 包含 对 其 他 函数 的 调用 吗 ? 
当然 可 以 。 我 们 可 以 根据 需要 进行 多 重 的 内 套 调用 。 
: 函数 名 称 里 可 以 具有 哪些 字符 ? 




























































































答 : 函数 名 称 必须 以 字母 或 下 划 线 开头 ， 可 以 包含 字母 、 数 字 和 
下 划 线 ， 不 能 包 


I> 











空格 、 标 点 符号 和 其 他 特殊 字符 。 





3.8 作业 





请 先 回 答 问 题 ， 再 参考 后 面 的 











3.8.1 测验 



































1. 调用 函数 时 使 用 : 

















a， 关 键 字 function 
b. 命令 call 
c 函数 名 称 及 一 对 括号 


2. 函数 执行 return 语 句 的 结果 是 什么 ? 


a. 生成 一 条 错误 信息 
b. 返回 一 个 值 ， 函 数 继续 

















c. 返回 一 个 值 ， 函 数 停止 执行 














3. 在 函数 内 部 声明 的 变量 
a， 局 部 变量 
b. 全 局 变量 
c. 参数 
3.8.2 BR 


1. 选 c。 使 用 函数 名 称 调用 





2. ite. FER 


























称 为 : 











行 return 语 句 











一 个 值 ; 


然后 终止 函 





























3. 选 a。 函 数 内 部 定义 的 变量 具有 局 部 作用 域 。 
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3.9 练习 


编写 一 个 函数 ， 接 收 摄氏 度数 值 作为 参数 ， 返 回 相应 的 华氏 度 〈 参 
考 第 2 章 介 绍 的 代码 ) 。 


在 HIML 页 面 里 测试 这 个 函数 。 

















第 4 章 DOM 对 象 科 内 置 对 象 


本 章 主要 内 容 包 括 : 


jalert()、prompt() 和 confirm() 与 用 户 交 互 
getElementById() 选 择 页 面 元 素 
jinnerHTML 访 问 HTML 内 容 

用 浏览 器 的 history 对 象 
过 navigator 对 象 获得 浏览 器 信息 
用 Date 对 象 操作 日 期 和 时 间 
上 用 Math 对 象 简化 计算 


第 1 章 简 要 介绍 了 DOM 及 DOM 树 里 顶端 对 象 window， 还 有 
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韶关 向 















































个 子 对 象 document。 


本 章 进 一 步 详 细 介 绍 一 些 实用 的 对 象 和 方法 。 









































41 SAP XH. 





在 window 对 象 的 方法 











hh ， 有 一 些 是 专门 用 了 





























的 ， 从 而 实现 页 面 与 


























4.1.1 alert() 


























Is 





户 的 交互 。 



































话 框 只 是 显示 


消息 和 








六 面 已 经 使 用 过 alert0 向 用 户 弹 出 一 个 信息 对 话 框 ， 
He 个 确定" 按 铀 。 
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停止 运行 ， 页 面 与 




















户 的 交互 也 被 暂停 ， 





处 理 




















mM hH à 














直到 用 / 








alert() 方 法 把 字符 串 作为 参数 : 
alert("This is my message"); 














alert() 没 有 返回 值 。 














4.1.2 confirm() 


与 alert() 方 法 相同 的 是 ，confirm() 























显示 一 些 消 息 。 不 同 的 是 ，confirm() 对 话 
以 点 击 “ 月 定 > 或 取消 ?按钮 而 不 只 是 一 


点 击 任意 一 个 按钮 都 会 关闭 对 话 框 ， 让 有 
被 单 击 ，confirm() 方 法 返回 不 同 的 值 。 单 
值 “ 真 ”， 单 击 “ 取 消 ” 按 钮 返回 布尔 值 “ 假 ”。 









































tla a 











出 一 个 模 态 对 话 框 ， 向 用 户 


输入 与 输出 信息 























但 这 种 模 态 对 


术语 “ 模 态 ”意味 着 脚本 和 暂时 





关闭 对 话 框 为 止 。 



































á 
框 为 用 户 提供 了 
个 “确定 ”按钮 ， 如 图 4.1 所 示 


个 选择 ， 可 











本 继续 执行 ， 但 根据 个 按钮 


















































击 “ 确 定 ?按钮 返回 布尔 
关于 数据 类 型 的 详细 介绍 会 
















































































在 下 一 章 进行 ， 目 前 我 们 只 需要 知道 布尔 类 型 的 变量 





能 : Aa 假 。 








javascript 








HO 











ey Are you happy to continue? 


JN 





两 种 取 值 可 











图 4.1 confirm0O 对 话 框 
jconfirm() 对 话 框 的 方式 与 alert() 类 似 ， 也 是 以 所 需 的 字符 串 











UD 
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为 参数 : 





var answer=confirm("Are you happy to continue?”); 


























其 中 不 同 的 是 可 以 把 返回 的 值 〈 真 或 假 ) 赋予 一 个 变量 ， 之 后 程序 
就 可 以 根据 这 个 值 进行 适当 的 操作 。 












































4.1.3 prompt() 
promptO 是 打开 模 态 对 话 框 的 另 一 种 方式 ， 它 允许 用 户 输入 信息 。 
promptO 对 话 框 的 调用 方式 与 confirm0 是 一 样 的 : 

var answer = prompt( "What is your full name?"); 


promptO 方 法 还 可 以 有 第 二 个 可 选 参数 ， 表 示 默 认 的 输入 内 容 ， 从 
而 避免 用 户 直 接点 击 “ 确 定 ” 按 钮 而 不 输入 任何 内 容 。 


var answer = prompt("What is your full name?", "John Doe"); 
prompt() 对 话 框 的 返回 值 取 决 于 用 户 进行 了 什么 操作 。 
。 如 果 用 户 输 入 了 信息 ， 然 后 点 击 “ 确 定 ” 按 钮 或 按 回 车 键 ， 返 回 值 就 


是 用 户 输入 的 字符 串 。 
。 如 果 用 户 没 有 在 对 话 框 里 输入 信息 就 点 击 “ 确 定 ” 按 钮 或 按 回 车 键 ， 
返回 值 是 调用 prompt() 方 法 设置 的 第 二 个 可 选 参数 的 值 (如 果 有 的 
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。 如 果 用 户 简单 关闭 了 这 个 对 话 框 〈 也 就 是 点 击 “ 取 消 ” 按 钮 或 按 Esc 
5) ， 返 回 值 就 是 null。 
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JavaScript 在 多 种 情况 下 使 用 null 表 示 空 值 。 作 为 数值 使 用 时 ， 它 代表 0， 作 为 字符 串 
时 ， 它 代表 空 字符 串 %”， 作 为 布尔 值 时 ， 它 代表 “ 假 ”。 


























前 面 代码 生成 的 promptO 对 话 框 如 图 4.2 所 示 。 





y Javascript a x 


(i) What is your full name? 





Gres | vo] 











4.2 ”prompt() 对 话 框 





4.2 ”根据 id 选择 元 素 
































本 书 第 三 部 分 将 详细 介绍 使 | 
对 象 ， 但 目前 我 们 着 重 介 








jdocument 对 象 的 多 种 方法 遍历 DOM 
绍 一 个 方法 : getElementById()。 

如 果 想 从 HTML 页 面 里 选择 某 个 特定 id 的 元 素 ， 我 们 只 需要 把 相应 
元 素 的 id 作为 参数 来 调用 document 对 象 的 getElementById(0) 方 法 ， 它 它 就 会 
返回 特定 id 的 页 面 元 素 所 对 
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应 的 DOM 对 象 
举例 来 说 ， 假 设 Web 页 面包 含 一 个 <div> 元 素 : 
<div id="div1"> 
.DIV 元 素 的 内 容 .… 
</div> 
在 JavaScript 代 码 里 ， 把 相应 的 id 作为 参数 调用 getElementById() 方 
法 ， 就 可 以 访问 这 个 <div> 元 素 : 
var myDiv = document.getElementById("divi"); 








文 样 就 得 到 了 页 面 特定 的 元 素 ， 




















能 够 访问 它 的 全 部 属性 和 方法 。 


为 了 让 范例 代码 得 到 期 望 的 结果 ， 这 个 页 下 
属性 要 求 是 唯一 的 ， 











元 素 一 定 要 设置 id 属性 。HTML 页 面 元 素 的 id 
所 以 这 个 方法 能 够 返回 与 id 匹配 的 唯一 元 素 


innerHTML 属性 


























innerHTML 属 性 














E 对 于 很 多 DOM 对 象 来 说 都 是 一 个 很 好 用 的 属性 
i E 假设 HTML 页 面包 含 
0 下 元 























<div id="divi"> 
<p>Here is some original text.</p> 
</div> 
利用 getElementById0 和 innerHTMLO 的 组 合 就 可 以 访问 这 个 <div> 元 
素 里 的 HTML 内容。 
var myDivContents = document.getElementById("divi").innerHTML; 























hH 


变量 myDivContents 现 在 会 包含 如 下 字符 串 : 


"<p>Here is some original text.</p>" 


还 可 以 利用 innerHTML 设 置 选 定 元 素 的 内 容 : 


























document.getElementById("divi").innerHTML = 
"<p>Here is some new text instead!</p>"; 





p RAT ERIE MPa FER SMUT 内 容 ， 以 新 字符 中 
Re 








4.3 访问 浏览 器 历史 记录 
在 J avaScript 里 ， 浏 览 器 的 历史 记录 是 以 window.history 对 象 代 表 


的 ， 它 基本 上 就 是 访问 过 的 URL 列 表 。 这 个 对 象 的 方法 让 我 们 能 够 使 用 
这 个 列表 ， 但 不 能 直接 地 修改 这 些 URL。 






































































































































这 个 对 象 只 有 一 个 属性 ， 就 是 它 的 长 度 ， 表 示 用 户 访问 过 的 页 面 的 
数量 : 


alert("You've visited " + history.length + " web pages in this browser 
session"); 


history 对 象 有 三 个 方法 。 























forward0 和 backward() 方 法 相当 于 点 击 浏览 器 的 “前 进 ? 和 “后 退 ” 按 
钮 ， 可 以 得 到 历史 列表 里 下 一 个 或 前 一 个 页 面 。 


history.next(); 


第 三 个 方法 是 go()， 它 有 一 个 参数 ， 是 正 的 或 负 的 整数 ， 可 以 跳 到 
历史 记录 列表 里 的 相对 位 置 : 








































































































history.go(-3); // 回 退 3 个 页 面 
history.go(2);  // 前 进 2 个 页 面 


















































这 个 方法 也 可 以 接收 字符 串 作为 参数 ， 找 到 历史 记录 列表 里 第 一 个 
匹配 的 URL。 














ay 











history.go("example.com"); // 到 达 历 史记 录 列 表 里 第 一 个 包含 "example.com" 的 URL 














4.4 使 用 location 对 象 


location 对 象 包含 当前 加 载 页 面 的 URL 信 息 。 











页 面 的 URL 是 








多 个 部 分 组 成 的 : 

















[协议 ]//[ 主 机 名 ] : [端口 ]/[ 路 径 ] [搜索 ] [hash] 





ZN o 





下 面 是 个 URL 范 例 : 


http://www.example.com:8080/tools/display.php?section=435#list 

















location 对 象 的 一 系列 属性 包含 了 URL 各 个 部 分 的 数据 ， 如 表 4.1 所 
表 4.1 location 对 象 的 属性 
属性 内 容 








ocation.href 


‘http://www.example.com:8080/tools/display.php?section=435#list’ 





ocation.protocol 


‘http:’ 





ocation.host 


‘www.example.com:8080’ 





ocation.hostname 


‘www.example.com’ 





ocation.port 


‘8080? 








ocation.pathname 


‘/tools/display.php’ 

















location.search “?section=435’ 





location.hash ‘#list’ 





























44.1 ”使 用 location 对 象 导航 
利用 location 对 象 有 
第 一 种 是 直接 设置 对 象 的 href 属 性 : 




































































location.href = ‘www. 


种 方式 可 以 帮助 用 户 导航 至 新 页 面 。 








newpage.com' ; 











使 用 这 种 方法 把 用 户 转移 到 新 页 面 时 ， 



























































历 
面 。 如 果 想 用 新 的 URL 直 接替 换 当 前 页 面 ， 















































如 始 页 面 还 保留 在 浏览 器 的 








史记 录 里 ， 用 户 可 以 利用 浏览 器 的 “后 退 * pL HAE 到 以 前 的 页 











即 把 当前 页 面 从 历史 记录 列 








表 里 删除 ， 可 以 使 用 location 对 象 的 replace() 方 法 : 





location.replace('ww. 


newpage.com'); 

















这 样 就 会 在 浏览 器 和 历史 记录 列表 里 都 

















使 用 新 的 URL 来 代替 旧 的 。 


























4.4.2 ”刷新 页 面 


如 果 要 在 浏览 器 里 重新 加 载 当前 页 面 ， 
新 ”按钮 ， 我 们 可 以 使 用 reload0) 方 法 : 


location.re 


[提示 : | 
如 果 使 用 没有 参数 的 reload0 方 法 ， 当 浏览 器 的 缓存 
















































































也 就 是 相当 于 用 户 点 击 “ 刷 


load() 


有 保存 了 当前 页 面 时 ， 就 会 加 载 缓存 














的 内 容 。 为 了 避免 这 种 情况 的 发 生 ， 确 保 从 服务 器 获得 页 面 数据 ， 可 以 在 调用 reload() 方 法 时 


添加 参数 true: 


document.relo 











ad (true); 


45 浏览 器 信息 : navigator 对 象 


location 对 象 保存 了 浏览 器 当前 UREL 的 信息 ， 而 navigator 对 象 包含 了 
浏览 器 程序 本 身 的 数据 。 





实践 
利用 navigator 对 象 显示 信息 


我 们 将 编写 一 段 代 码 ， 展 示 navigator 对 象 所 包含 的 浏览 器 设置 信息 。 利 用 编辑 软件 创 
建文 件 navigatorhtml， 输 入 程序 清单 4.1 所 示 的 代码 。 保 存 文件 并 且 在 浏览 器 里 打开 它 。 


程序 清单 4.1 使 用 navigator 对 象 
































pam 





























<!DOCTYPE html> 
<html> 
<head> 
<title>window.navigator</title> 
<style> 
td {border: 1px solid gray; padding: 3px 5px;} 
</style> 
</head> 
<body> 
<script> 
document .write("<table>"); 
document .write("<tr><td>appName</td><td>"+navigator.appName + 
we "</td></tr>"); 


document.write ("<tr><td>appCodeName</td><td>"+navigator.appCodeName + 
we "</td></tr>"); 

document .write("<tr><td>appVersion</td><td>"+navigator.appVersion 
w+ "</td></tr>"); 

document .write("<tr><td>language</td><td>"+navigator.language + 
we "</td></tr>"); 


document.write ("<tr><td>cookieEnabled</td><td>"+navigator.cookieEnabled + 
we "</td></tr>"); 

document .write("<tr><td>cpuClass</td><td>"+navigator.cpuClass + 
we "</td></tr>"); 

document .write("<tr><td>onLine</td><td>"+navigator.onLine + 
we "</td></tr>"); 

document .write("<tr><td>platform</td><td>"+navigator.platform + 
w"</td></tr>"); 

document .write("<tr><td>No of 
Plugins</td><td>"+navigator.plugins.length + "</td></tr>"); 

document .write("</table>") ; 

</script> 

</body> 
</html> 


得 到 的 结果 如 图 4.3 所 示 。 




















J Qwindownavigator \e 
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appName Netscape 
appCodeName || Mozilla 
5.0 (X11; Linux i686) AppleWebKit/535.2 (KHTML, like Gecko) 









































appVersion | Ubuntu/11.04 Chromium/15.0.874.106 Chrome/15.0.874.106 Safari/535.2 
language en-US 

cookieEnabled || true 

cpuClass undefined 

onLine true 

platform Linux i686 








No of Plugins || 13 























图 4.3 ”navigator 对 象 里 的 浏览 器 信息 


天 哪 ， 这 是 怎么 了 ? 我 们 使 用 的 操作 系统 是 Ubuntu Linux， 浏 览 器 是 Chromium， 为 什 
么 报告 的 appName 属 性 显示 的 是 Netscape，appCodeName 属 性 显示 的 是 Mozilla? 而 且 
cpuClass 的 数据 是 “未 定义 ?>， 这 是 为 什么 呢 ? 


navigator 对 象 向 我 们 展示 了 丰富 历史 和 复杂 行业 竞争 的 一 角 。 这 些 关 于 用 户 平台 的 信 
息 虽 然 并 不 可 靠 ， 但 也 是 它 能 够 提供 的 最 佳 结果 了 。 不 是 任何 浏览 器 都 支持 全 部 这 些 属性 
的 《比如 本 例 中 cpuClass 就 没有 信息 ) ， 而 且 浏 览 器 类 型 和 版 本 信息 也 不 是 和 我 们 所 想 的 
匹配 。 图 4.4 是 在 Windows 7 环境 下 使 用 IE 9 加 载 同一 页 面 所 得 到 的 结果 。 















































































































































Microsoft Internet Explorer 








Mozilla 


5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2: NET CLR 


2.0.50727; NET CLR 3.5.30729; .NET CLR 3.0.30729; HPNTDF; .NET4.0C) 








cookieEnabled 


undefined 
true 








cpuClass 








onLine 


platform 











No of Plugins 

















4.4 navigator 对 象 里 的 浏览 器 信息 


这 里 的 cpuClass 有 了 数据 ， 但 正 不 支持 language 属 性 ， 所 以 值 是 “未 定义 ”。 


虽然 浏览 器 间 的 兼容 性 已 经 比 前 几 年 好 多 了 ， 但 有 时 我 们 还 是 需要 了 解 用 户 浏览 器 的 
功能 ， 而 这 时 使 用 navigator 对 象 几乎 就 是 一 个 错误 的 选择 。 





说 明 : 











本 书 稍 后 会 介绍 “功能 检测 ”， 那 是 一 种 更 精确 的 跨 浏览 器 手段 来 检测 用 户 浏览 器 的 功能 ， 从 而 决定 如 何 进 


行 相应 的 操作 。 














4.6 日 期 和 时 间 

Date 对 象 处 理 日 期 和 时 间 。 与 前 面 介绍 的 对 象 不 同 的 是 ， 
DOM 里 并 没有 山 成 的 Date 对 象 ， 而 是 要 我 们 在 需 时 创建 1 的 Date 对 
象 。 每 个 Date 对 象 都 代表 不 同 的 日 期 和 时 间 。 
4.6.1 创建 具有 当前 日 期 和 时 间 的 Date 对 象 


新 建 一 个 包含 日 期 和 时 间 信 息 的 Date 对 象 的 最 简单 方法 是 : 


var mydate = new Date(); 


变量 mydate 就 是 一 个 Date 对 象 ， 包 含 了 创建 对 象 时 的 日 期 和 时 间 信 
息 。JavaScript 具 有 很 多 方法 用 于 获取 、 设 置 和 编辑 Date 对 象 里 的 数据 ， 
下 面 是 一 些 范例 : 


























































































































































































































































































































var year=mydate.getFullYear(); // 四 位 数字 表示 的 年 份 ， 比 如 2612 

var month=mydate.getMonth(); // 数 字 表 示 的 月 份 ，8 一 11，68 表 示 1 月 ， 其 余 类 推 
var date=mydate.getDate(); // 日 期 ，1 一 31 

var day=mydate.getDay(); // 星 期 8~6，@ 表 示 星 期 日 ， 其 余 类 推 

var hours=mydate.getHours(); //I, @~23 

var minutes=mydate.getMinutes(); //4}, @~59 

var seconds=mydate.getSeconds();  //#, @~59 





















































4.6.2 ”创建 具有 指定 日 期 和 时 间 的 Date 对 象 


给 Date0 语 句 传递 相应 的 参数 ， 我 们 就 可 以 创建 任意 指定 日 期 和 时 
间 的 Date 对 象 ， 方 式 有 下 面 几 种 : 















































new Date(milliseconds) // 自 1976 年 1 月 1 日 起 的 毫秒 数 
new Date(dateString) 


new Date(year,month, day,hours,minutes,seconds,milliseconds) 











下 面 是 一 些 范 例 。 


























比如 使 用 日 期 字符 串 : 














var dl=new Date("October 22, 1995 10:57:22") 























在 使 用 分 散 的 各 部 分 参数 时 ， 位 

















定 的 参数 值 是 0: 























靠 后 的 参数 是 可 选 的 ， 不 明确 指 





var d3=new Date(95,9,22,10,57,0) 





var d2=new Date(95,9,22) //19954F10/4 22 








Hoo: 66: 66 
//1995 年 16 月 22 日 16: 57: 66 




















4.6.3 ”设置 和 编辑 日 期 与 时 
Date 对 象 








ASS 

















In 
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了 丰富 的 方法 来 设置 或 编辑 日 期 和 时 间 的 各 个 组 成 部 








mydate.setDate(15); // 改 成 当月 15 日 
document.write("After amending dat 
Day()); 





var mydate=new Date(); // 当 前 日 期 和 时 间 
document.write("Object created on day number"+mydate.getDay()+"<br />"); 


e to 15th, the day number is"+mydate. get 





















































期 与 时 间 ， 接 着 就 把 




















前 面 的 代码 片段 里 ， 首 先 创 建 了 一 个 mydate 对 象 来 代表 创建 时 的 
子 换 成 了 15 日 。 如 果 在 这 个 操作 前 后 我 们 分 别 获 
取 相应 的 星期 几 ， 就 会 发 现 相应 的 数据 已 经 重新 计算 过 了 。 
































Object created on day number 5 


After amending date to 

















15th, the day number is 0 





在 这 个 范例 里 ， 对 象 创建 的 
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期 是 星期 五 ， 而 当月 的 15 日 是 星期 






































我 们 还 可 以 对 日 期 和 时 间 进 行 














算术 运算 ， 让 Date 对 象 帮 我 们 完成 这 








in] 


所 


“复杂 的 过 程 。 





var mydate=new Date(); 

document.write("Created: "4+mydate.toDateString()+" "+mydate.toTimeString() 
+" <br />"); 

mydate.setDate(mydate.getDate()+33); // 给 日 期 部 分 增加 33 天 
document.write("After adding 33 days: "+mydate.toDateString()+" "+mydate.t 
oTimeString()); 



























































前 面 的 范例 计算 了 当日 之 后 33 天 的 日 期 ， 自 动 根据 需要 自动 调整 ] 
、 日 、 月 和 (或 ) 年 。 注 意 其 中 的 toDateString() 和 toTimeString() 方 
法 ， -o 的 ， 能 够 把 日 期 转换 为 更 容易 理解 的 格式 。 前 例 的 输 
0 下 这 样 的 : 


Created: Fri Jan 06 2012 14:59:24 GMT+0100 (CET) 
After adding 33 days: Wed Feb 08 2012 14:59:24 GMT+0100 (CET) 


操作 日 期 和 时 间 的 方法 非常 多 ， 在 此 难以 完全 介绍 。 附 录 B 有 Date 
对 象 的 完整 方法 列表 。 



































































































































4.7 利用 Math 对 象 简化 运算 
在 需要 进行 常见 的 各 种 运算 时 ， 使 用 Math 对 象 能 够 简化 很 多 工作 。 


与 Date 对 象 不 同 的 是 ，Math 对 象 不 需要 创建 就 可 以 使 用 。 它 是 已 经 
存在 的 ， 我 们 直接 调用 它 的 方法 就 可 以 了 。 























































































































附录 B 包 含 了 Math 对 象 的 完整 方法 列表 ， 下 面 的 表 4.2 列 出 了 常见 的 
一 些 方 法 
#42 Math 对象 的 一 些 方法 
方法 首 述 

ceil(n) 返回 n 向 上 取 整 到 最 近 的 整数 

floor(n) 返回 n 向 下 取 整 到 最 近 的 整数 

max(a,b,c,...) 返回 最 大 值 

min(a,b,c,...) 返回 最 小 值 

round(n) 返回 n 四 舍 五 入 到 最 近 的 整数 

random() 返回 一 个 0 到 1 之 间 的 随机 数 























下 面 来 看 一 些 范例 。 
4.7.1 取 整 

ceil()、floor(O 和 round0) 方 法 以 不 同方 式 提 
数 : 














CH 
= 


小 数 点 的 数值 截取 为 整 








var myNum1=12.55; 
var myNum2=12.45; 
alert(Math.floor(myNum1)); ”// 显 示 12 
alert(Math.ceil(myNum1)); // 显 示 13 
alert(Math.round(myNum1)); // 显 示 13 
alert(Math.round(myNum2)); // 显 示 12 


























在 使 用 round0 时 ， 如 果 分 数 部 分 的 值 大 于 等 于 0.5， 得 到 的 结果 就 
是 向 上 最 近 的 整数 ， 反 之 ， 得 到 的 结果 就 是 向 下 最 近 的 整数 。 















































4.7.2 ”获得 最 大 值 和 最 小 人 
利用 min0 和 max0 可 以 从 一 组 数据 中 获得 最 小 值 和 最 大 值 : 















































var ageDavid = 23; 

var ageMary = 27; 

var ageChris = 31; 

var ageSandy = 19; 

document.write("The youngest person is " 
+ Math.min(ageDavid, ageMary, ageChris, ageSandy) 
+ " years old<br />"); 

document.write("The oldest person is " 
+ Math.max(ageDavid, ageMary, ageChris, ageSandy) 
+ " years old<br />"); 


输出 结果 类 似 如 下 所 示 : 
The youngest person is 19 years old 
The oldest person is 31 years old 
4.7.3 ”随机 数 

利用 Math.random() 方 法 可 以 生成 0 到 1 之 间 的 一 个 随机 数 。 























更 常见 的 情况 是 ， 我 们 想 指 定 随 机 数 的 范 目 
间 的 随机 数 。 





， 比 如 ， 获 得 0 到 100 之 


























于 Mathrandom() 产 生 的 是 0 到 1 之 间 的 随机 数 ， 要 让 它 实现 我 们 的 
要 求 ， 最 好 把 它 包 装 到 一 个 小 函数 里 。 下 面 这 个 函数 利用 Math 对 象 生成 
的 随机 数 ， 乘 变量 range (作为 参数 传递 给 函数 ) 来 扩大 数值 的 范围 
然后 利用 ;ound0 去 除数 值 中 的 小 数 部 分 。 


function myRand(range) { 
return Math.round(Math.random() * range); 
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如 果 想 得 到 0 到 100 之 间 的 随机 数 ， 只 需要 调用 myRand(100)。 












































在 程序 里 要 直接 使 用 Math 的 方法 ， 这 些 方法 是 属于 Math 的 ， 而 不 是 属于 创建 的 对 象 。 换 
名 话说 ， 直面 的 香 句 是 错误 的 : 














var myNum=24.77; 
myNum. floor(); 











这 样 的 代码 会 导致 JavaScript 错 误 。 
正确 的 用 法 是 


























Math.floor(myNum) ; 
































4.7.4 数学 常数 
很 多 常用 的 数学 常数 都 以 Math 属 性 的 方式 出 现 ， 如 表 4.3 所 示 。 
表 4.3 ”数学 常数 
常数 描述 





E 自然 对 数 的 底 ， 大 约 是 2.718 














LN2 2 的 自然 对 数 ， 大 约 是 0.693 
































LN10 0 的 自然 对 数 ， 大 约 是 2.302 
LOG2E 以 2 为 底 e 的 对 数 ， 大 约 是 1.442 
LOG10E 以 10 为 底 e 的 对 数 ， 大 约 是 0.434 
PI 圆周 率 ， 大 约 是 3.141 59 
SQRT1 2 2 的 平方 根 的 倒数 ， 大 约 是 0.707 
SQRT2 2 的 平方 根 ， 大 约 是 1.414 





























我 们 可 以 在 计算 中 直接 使 用 这 些 常 数 : 























var area=Math.PI*radius*radius; // 圆 的 面积 
var circumference=2*Math.PI*radius; //JAK 














4.75 ”关键 字 with 
任何 对 象 都 可 以 使 用 关键 字 with， 但 Math 对 象 是 最 适合 用 来 示范 
的 。 通 过 使 用 with， 我 们 可 以 减少 一 些 枯燥 的 键盘 输入 工作 。 


关键 字 with 以 对 象 作 为 参数 ， 然 后 是 一 对 花 括 号 ， 其 中 包含 着 代码 
块 。 代 码 块 里 的 语句 在 调用 特定 对 象 的 方法 时 可 以 不 明确 指定 这 个 对 
象 ， 因 为 JavaScript 会 假定 这 些 方法 是 属于 作为 参数 的 那个 对 象 。 

















































































































下 面 是 一 个 范例 : 





with (Math) { 
var myRand = random(); 
var biggest = max(3,4,5); 
var height = round(76.35) ; 























在 这 个 范例 里 ， 我 们 只 使 用 方法 的 名 称 就 调用 了 Math.random()、 
Math.max() 和 Math. round0) 方 法 ， 姑 为 调用 这 些 方法 的 代码 块 与 Math 对 
象 实 现 了 关联 。 









































读 取 日 期 与 时 间 


根据 本 章 介 绍 的 知识 ， 我 们 来 编写 一 段 脚 本 ， 在 页 面 加 载 时 获取 当前 的 日 期 与 时 间 。 
其 中 还 包括 一 eer 点 击 它 可 以 刷新 页 面 ， 从 而 刷新 日 期 和 时 间 信 息 。 


代码 如 程序 清单 4.2 所 示 。 














程序 清单 4.2 ”获取 日 期 和 时 间 信 息 





<!DOCTYPE html> 


<html> 
<head> 
<title>Current Date and Time</title> 
<style> 
p {font: 14px normal arial, verdana, helvetica;} 
</style> 
<script> 
function telltime() { 
var out = ""; 
var now = new Date(); 
out += "<br />Date: " + now.getDate(); 
out += "<br />Month: " + now.getMonth() ; 
out += "<br />Year: " + now.getFullYear(); 
out += "<br />Hours: " + now.getHours() ; 
out += "<br />Minutes: " + now.getMinutes(); 
out += "<br />Seconds: " + now.getSeconds(); 
document.getElementById("divi").innerHTML = out; 
} 
</script> 
</head> 
<body> 


The current date and time are:<br/> 

<div id="divi1"></div> 

<script> 

telltime(); 

</script> 

<input type="button" onclick="location.reload()" value="Refresh" /> 
</body> 
</html> 

函数 telltime() 的 第 一 个 语句 创建 一 个 名 为 now 的 Date 对 象 。 根 据 前 面 介绍 的 知识 ， 
ae ee EE 


var now = new Date(); 
































All 
分 ， 然 后 把 输 昌 


out += "<br 
out += "<br 
out += "<br 
out += "<br 
out += "<br 
out += "<br 
最 后 ， 我 们 使 
innerHTML 方法 
document. 
页 面 <body> 区 域 里 有 - 


<script> 
telltime(); 
</script> 


为 了 刷新 日 期 和 时 间 信 息 ， 我 们 只 需要 在 浏览 器 里 重新 加 载 页 面 。 当 脚本 重新 运行 
时 ， 就 会 新 建 Date 对 象 的 一 个 新 实例 ， 包 含 当 前 的 日 期 和 时 间 。 当 然 ， 我 们 可 以 点 击 浏览 
器 的 “刷新 ”按钮 来 实现 上 述 操作 。 但 既然 我 们 知道 如 何 使 用 location 对 象 重新 加 载 页 面 ， 我 
们 就 从 按钮 的 onClick 方 法 里 调用 location 对 象 的 方法 : 


location.reload() 















































getElementById() 方 法 选中 id="div1" 的 <div> 元 素 〈 初 始 为 室 ) ， 利 
巴 变 量 的 内 容 写 入 其 中 。 


getElementById("divi").innerHTML = out; 


getDate()、getMonth() 等 类 似 的 方法 ， 我 们 可 以 访问 日 期 和 时 间 的 各 个 组 成 部 
8 的 信息 组 合成 一 个 字符 串 ， 保 存在 变量 out 里 。 








/>Date: " + now.getDate(); 
/>Month: " + now.getMonth(); 
/>Year: " + now.getFullyYear(); 
/>Hours: " + now.getHours(); 
/>Minutes: " + now.getMinutes ( 


J 


) 
/>Seconds: " + now.getSeconds(); 



































一 小 段 代码 ， 会 调用 函数 telltime()。 















































图 











的 计数 是 从 0 (1 月 ) H 


4.5 





展示 了 脚本 运行 的 结果 。 注 意 到 其 中 的 月 份 显示 为 0， 这 是 因为 JavaScript 对 月 份 
F 始 ， 到 11 (12 月 ) 结束。 






































/ Q current Date and Time x \\S\ 
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The current date and time are: 
Date: 7 

Month: 0 

Year: 2012 

Hours: 12 

Minutes: 45 

Seconds: 4 





图 4.5 获取 日 期 和 时 间 信 息 








48 小 结 


本 章 首 先 介 绍 了 一 些 实用 的 对 象 ， 它 们 有 的 内 置 于 JavaScript， 有 的 
是 通过 DOM 使 用 的 ; 它们 的 方法 和 属性 能 够 让 我 们 更 轻松 地 编写 代 






































































































































































































































其 次 介绍 了 如 何 使 用 window 对 象 的 模 态 对 话 框 与 用 户 交 互信 息 。 

然后 介绍 了 如 何 利 用 document.getElementById() 方 法 选择 具有 指定 id 
的 页 面 元 素 ， 如 何 使 用 innerHTML 属 性 读 取 和 设置 页 面 元 素 内 部 的 
HTML 


















































接着 介绍 了 如 何 利用 navigator 对 象 获得 浏览 器 信息 ， 使 用 location 对 
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最 后 介绍 了 如 何 使 用 Date 和 Math 对 象 。 


Ez] 


49 问答 





H: Date() 函 数 有 没有 处 理 时 区 的 方法 ? 
答 : 当然 有 。 除 了 本 章 介绍 的 getXXX(0 方 法 和 setXXX() 方 法 〈 比 
如 getDate0 和 setMonth()) 外， 它们 还 有 相应 的 UTC〈 协 调 世 界 时 ， 以 
前 称 为 “格林 尼 治 标准 时 间 ”) 版 本 ， 比 如 getUTCDate0 和 
setUTCMonth()。 利 用 getTimeZoneOffset() 方 法 可 以 获得 本 地 时 间 与 UTC 
时 间 的 时 差 。 详 细 的 方法 目录 请 见 附 录 B。 





























































































































问 : Date() 的 方法 getFullYear() 和 setFullYear() 为 什么 不 直接 命名 
为 getYear(0) 和 setYear(0 呢 ? 




















答 : getYear() 方 法 和 setYear(0) 方 法 也 是 存在 的 ， 它 们 使 用 2 位 数 
表示 年 份 ， 而 getFullYear() 和 setFullYear() 使 用 4 位 数字 表示 年 份 。 考 虑 
到 日 期 跨越 千 禧 年 时 可 能 产生 的 问题 ，getYear() 和 setYear() 已 经 不 再 使 
了 ， 而 应 该 使 用 getFullYear() 和 setFullYear()。 


























































































































4.10 作业 


请 先 回答 问题 ， 再 参考 后 面 的 答案 。 









































4.10.1 测验 
1. 在 确认 对 话 框 里 ， 当 用 户 点 击 “ 确 定 ” 按 钮 时 ， 会 发 生 什么 ? 
a. true 值 返回 到 调用 程序 
b. 显示 的 信息 返回 到 调用 程序 
c 什么 也 不 发 生 
2. Math 对 象 的 哪个 方法 总 是 把 数值 向 上 取 整 ? 


a. Math.round() 













































































b. Math.floor() 
c. Math.ceil() 


3. 如 果 加 载 的 页 面 是 http://www.example.com/documents/letter.htm? 
page=2 ，location 对 象 的 pathname 属 性 会 包含 什么 信息 ? 


























a. http 
b. www.example.com 
c. /documents/letter.htm 
d. page=2 

4.10.2 答案 


1. 选 a。 当 “确定 ”按钮 被 点 击 后 ， 会 返回 一 个 true 值 ， 对 话 框 会 关 
闭 ， 控 制 权 返回 到 调用 程序 。 



































2. 选 c。Math.ceil0 总 是 把 数值 向 上 取 整 到 最 近 的 整数 。 


包含 的 内 容 


t 








3. ic. location.pathname)s& PE 
7=“/documents/letter.htm” o 





4.11 练习 
修改 代码 清单 4.3， 用 一 个 字符 串 输 出 日 期 和 时 间 ， 如 下 所 示 : 












































25 Dec 2011 12:35 























使 用 Math 对 象 编写 一 个 函数 ， 计 算 圆柱 体 的 体积 。 以 圆柱 体 的 直径 
We (单位 为 米 ) ， 最 后 的 结果 要 向 上 取 整 (单位 为 立方 
米 ) 。 
















































































利用 history 对 象 创建 一 些 页 面 ， 这 些 页 面包 含 自己 的 “前 进 " 和 “后 
退 ” 按 钮 。 在 遍历 了 这 些 页 面 之 后 (也 就 是 让 它们 进入 了 浏览 器 的 历史 
记录 ) ， 查 看 一 下 页 面 里 的 “前 进 " 和 “后 退 ” 按 钮 的 操作 结果 是 否 与 浏览 
器 里 的 相应 按钮 一 样 
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第 5 章 BUR 





































































































































































































































































































































































































本 章 主 要 内 容 包 括 : 
© JavaScript 支 持 的 多 种 数据 类 型 
。 数据 类 型 之 间 的 转换 
。 如 何 操作 字符 串 
。 如 何 创 建 和 填充 数组 
。 管理 数组 内 容 
“数据 类 型 "这 个 术语 表示 了 变量 包含 数据 的 本 质 特征 。 字 符 串 变量 
包含 一 个 字符 串 ， 数 值 变 量 包 含 一 个 数值 ， 等 等 。JavaScript 属 于 “宽松 
类 型 * 的 编程 语言 ， 意 味 着 JavaScript 变 量 在 不 同 的 场合 可 以 被 解释 为 不 
司 的 类 型 。 
在 JavaScript 里 ， 不 必 事 先 声 明 变 量 的 数据 类 型 就 可 以 使 用 变量 ， 这 
时 JavaScript 解 释 程 序 会 根据 情况 做 出 它 认 为 正确 的 判断 。 如 果 我 们 先 在 
变量 里 保存 了 一 个 字符 串 ， 稍 后 又 想 把 它 当 作 数 值 使 用 ， 这 在 JavaScript 
里 是 完全 可 行 的 ， 前 提 是 字符 串 里 的 确 包 含 “ 像 ”数值 的 内 容 《 比 
如 “200px” 或 “50 分 ”) 。 之 后 ， 这 个 变量 又 可 以 当 作 字符 串 使 用 了 ， 毫 
无 问题 。 
本 章 将 介绍 的 JavaScript 数 据 类 型 数值、 字符 串 和 布尔 值 ， 以 及 处 
理 这 些 数据 类 型 的 内 置 方法 。 其 中 还 会 介绍 字符 串 里 的 “ 转 义 序列 ”和 
JavaScript 的 两 种 特殊 数据 类 型 null( 空 ) i ite REN) -o R 
后 会 介绍 JavaScript 强 大 实用 的 数据 结构 之 一 : 数组 对 象 。 











5.1 数值 











ee le 比如 自然 数 1，2， 
3, .…， 加 上 0 就 组 成 了 整数 0，1，2，3， ...， 再 包括 负 整 


He. 3, 3, 4, 


… 就 组 成 了 整数 集 。 
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为 了 表示 整数 之 间 


或 多 位 数字 : 











的 数值 ， 只 需要 使 用 一 个 小 数 点 ， 之 后 添加 一 位 








3.141 592 6 











这 种 数值 称 为 “ 浮 点 数 ”， e URRE 好 像 小 数 











点 可 以 浮动 到 任何 


JavaScript 支 持 


5.1.1 整数 








数字 的 任何 位 








= 





PERF A 

















整数 可 以 是 正 整 数 、 负 整数 和 0。 换 名 话说， 整数 就 是 没有 小 数 部 


分 的 数值 。 
下 面 都 是 有 效 


33 

-1 000 000 
0 

-1 


5.1.2 FAM 
与 整数 不 同 的 是 


的 整数 : 

















Fe? 浮 点 数 具 


了 小数 部 分 ， 但 小 数 部 分 可 以 为 0。 浮 














点 数 的 表示 形式 可 以 是 传统 方式 ， 比如 3.141 59， 也 可 以 是 指数 形式 


的 ， 比 如 35.4e5。 
下 面 都 是 有 效 





的 浮 点 数 : 





e 3.0 

e 0.00001 
e -99.99 
e 2.5e12 
e le-12 























在 指数 表示 方法 中 ，e 表 示 “10 的 窜 *”， 所 以 35.4e5 表 示 “35.4 乘 10 的 5 次 究 ”"。 利 用 指数 表示 
法 ， 可 以 方便 地 表示 特别 大 或 特别 小 的 数值 。 








JavaScript 还 可 以 处 理 十 六 进 制 数 值 ， 以 前 级 0x 表 示 ， 比 如 0xab0080。 
5.1.3” 非 数值 (NaN) 
当 脚 本 尝试 把 一 些 非 数 值 数据 当 作 数值 处 理 ， 却 无 法 得 到 数值 时 ， 


返回 值 就 是 NaN。 举 例 来 说 ， 如 果 尝 试用 一 个 整数 乘 一 个 字符 串 ， 得 
1 的 结果 就 是 非 数 值 。 利 用 isNaNO 函 数 能 够 检测 非 数值 : 























TT 









































2) 














u 














isNaN(3); // 返 回 false 
isNaN(3.14159);  ”// 返 回 false 
isNaN("horse");  // 返 回 true 


















































5.1.4 ”使 用 parseFloat() 和 parseInt() 
JavaScript 提 供 了 两 个 可 以 把 字符 串 强 制 转换 为 数值 格式 的 函数 。 
parseFloat() 函 数 解 析 字 符 串 并 返回 一 个 浮 点 数 。 


如 果 被 解析 的 字符 串 的 首 字符 是 个 数字 ， 函 数 会 一 直 解 析 到 数值 结 
束 ， 然 后 返回 一 个 数值 而 不 是 字符 串 : 
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parseFloat("21.4"); // 返 回 21.4 
parseFloat("76 trombones"); // 返 回 76 
parseFloat("The magnificent 7"); // 返 回 NaN 














parselnt() PK SH DN He 类 似 的 ， 但 返回 的 值 是 整数 或 NaN。 它 还 
可 以 有 第 二 个 可 选 参数 ， 站 从 而 返回 二 进 制 、 八 进 制 






















































































或 其 他 进 制 数值 所 对 应 的 十 进 制 数值 。 
parseInt(18.95, 10); // 返 回 18 
parseInt("12px", 10); // 返 回 12 
parseInt("1110", 2); // 返 回 14 
parseInt("Hello"); // 返 回 NaN 























5.15 ”无穷大 (Infinity ) 

超过 JavaScript 能 够 表示 的 最 大 数值 ， 就 是 无 穷 大 。 在 大 多 数 
JavaScript 版 本 中 ， 最 大 的 数值 是 正 或 负 的 223 ， 虽 然 它 并 不 是 真正 的 无 
穷 大 ， 但 也 相当 大 了 。 


还 有 一 个 表示 负 的 无 穷 大 : -Infinity。 
























































利用 isFinite0) 函 数 可 以 判断 一 个 数值 是 否 是 无 穷 大 。 它 会 把 参数 转 
换 为 数值 ， 如 果 得 到 的 结果 是 NaN、 正 无 穷 大 或 负 无 穷 大 


(-Infinity) ， 函 数 返回 false〈 假 ) ， oe Eltrue ( 真 ) 。 (false 
和 true 是 布尔 类 型 的 值 ， 本 章 稍 后 介绍 。 

















isFinite(21); // 返 回 true 
isFinite("This is not a numeric value"); // 返 回 false 
isFinite(Math.sqrt(-1)); // 返 回 false 





















































字符 串 是 由 特定 字符 集 (通常 是 ASCII 或 通用 字符 集 〉 里 的 字符 组 
成 的 序列 ， 通 常用 于 保存 文本 内 容 。 

字符 串 的 定义 是 用 一 对 单 引号 或 一 对 双 引 号 实现 的 : 
var myString = "This is a string"; 


使 用 一 对 内 容 为 空 的 引号 可 以 定义 空 字符 串 ， 


var mystring = °°; 


5.2.1 转 义 序列 


我 们 想 放 到 字符 串 里 的 字符 有 些 可 能 没有 相应 的 键盘 按键 ， 或 是 
于 其 他 原因 而 成 为 不 能 在 字符 串 里 出 现 的 特殊 字符 ， 比 如 制 表 符 、 换 行 
符 、 定 义 字 符 串 所 用 的 单 引 号 或 双 引 号 。 为 了 在 字符 串 里 使 用 这 些 5 
符 ， 必 须 使 用 以 反 斜 线 O 开头 的 字符 组 合 ， 让 JavaScript 把 它们 解释 
为 正确 的 特殊 字符 。 这 种 组 合 被 称 为 “ 转 义 序列 ”。 


举例 来 说 ， 我 们 想 在 字符 串 里 添加 一 些 换行 符 ， 从 而 让 alert() 方 法 


使 用 这 个 字符 串 时 ， 它 会 显示 为 多 行 ， 





































































































































































































































































































































































































var message = "IMPORTANT MESSAGE:\n\nError detected!\nPlease check your 
wdata"; 
alert(message); 


图 5.1 展 示 了 插入 转 义 序列 后 得 到 的 结果 。 


























y Javascript Alert 

























































































IMPORTANT MESSAGE: 
Error detected! 
Please check your data 
图 5.1 ESRR IL AUS SAL 

表 5.1 列 出 了 常用 的 转 义 序列 。 

表 5.1 常用 的 转 义 序列 
转 义 序列 代表 的 字符 

it 制 表 符 

i 新 行 ， 在 字符 串 里 插入 一 个 换行 

\ 双 引 号 

\ 单 引号 

\ AER 

\x99 ASCI 字 符 的 值 ， 以 2 位 十 六 进 制 数值 表示 











\u9999 








统一 编码 字符 的 值 ， 以 4 位 十 六 进 制 数值 表示 








5.2.2 ”字符 串 方 法 





















































































































































































































































附录 B 有 string 对 象 的 完整 属性 和 方法 列表 ， 表 5.2 里 列 出 了 比较 重要 

的 一 部 分 。 
25.2 string 对 象 的 一 些 常用 方法 
方法 HR 

concat 连接 字符 串 ， 返 回 结果 字符 串 的 一 个 拷贝 

indexOf 返回 指定 值 在 字符 串 里 出 现 的 第 一 个 位 置 

lastIndexOf | 返回 指定 值 在 字符 串 里 出 现 的 最 后 一 个 位 置 

replace 在 一 个 字符 串 里 搜索 指定 的 子 字符 串 ， 并 且 用 新 的 子 串 进行 蔡 换 

split 把 字符 串 分 解 为 一 系列 子 串 ， 保 存 到 数组 里 ， 返 回 一 个 新 数组 

substr 从 指定 的 开始 位 置 ， 提 取 指 定数 量 的 字符 组 成 字符 串 

toLowerCase | 把 字符 串 转 换 为 小 写字 符 

toUpperCase | 把 字符 串 转 换 为 大 写字 符 
concat() 

前 面 的 范例 里 展示 过 使 用 操作 符 “+” 连 ERTE, 这 称 为 字符 串 级 





























联 。JavaScript 的 concat() 函 数 还 具有 额外 一 些 功能 











var stringi = "The quick brown fox "; 
var string2 = "jumps over the lazy dog"; 
var longString = string1.concat(string2) ; 


indexOf() 


























这 个 函数 可 以 寻找 子 字符 串 《〈 由 一 个 或 多 个 字符 组 成 ) 在 另 一 个 字 
符 串 里 第 一 次 出 现 的 位 置 ， 返 回 子 串 在 目标 字符 串 里 的 索引 《位 置 ) ; 
如 果 没 有 找到 ， 就 返回 -1。 


































































































var string1="The quick brown fox"; 
string1.indexOf('fox') // 返 回 16 
string1.indexOf('dog') // 返 回 -1 





























字符 串 里 第 一 个 字符 的 索引 是 0， 而 不 是 1。 








lastIndexOf() 





从 名 称 可 以 看 出 ，lastIndexOf() 的 工作 方式 类 似 于 indexOf()， 只 是 
返回 子 串 最 后 一 次 出 现 的 位 置 ， 而 不 是 第 一 次 。 









































replace() 





















































在 目标 字符 串 里 搜索 与 子 串 匹配 的 内 容 ， 并 且 用 新 的 子 串 蔡 换 它 : 




















var string1="The quick brown fox"; 


string1.replace("brown", "“orange"); //string1 现 在 是 "the quick orange fox" 














把 字符 串 分 解 为 多 个 子 串 的 组 合 ， 返 回 一 个 新 数组 。 








var stringi = "The quick brown fox "; 
var newArray = string1.split(" ") 


提示 : 





本 章 稍 后 将 会 介绍 数组 。 学 习 了 数组 知识 之 后 ， 能 够 更 好 地 了 解 这 个 函数 的 用 法 。 

















substr() 














这 个 方法 可 以 有 一 个 或 两 个 参数 。 























它 从 第 一 个 参数 指定 的 索引 位 置 开 始 提取 字符 ， 返 回 一 个 新 字符 
串 。 第 二 个 参数 指定 了 要 提取 的 字符 数量 ， 是 可 选 的 ， 如 果 没有 指定 ， 
就 会 提取 从 起 始 位 置 到 字符 串 结 束 的 全 部 字符 










































































var string1="The quick brown fox"; 
var subi=string1l.substr(4,11); = //## "quick brown" 
var sub2=string1l.substr(4); // 提 取 "quick brown fox" 














toLowerCase() 4! toUpperCase() 
把 字符 串 转换 为 全 部 小 写 或 全 部 大 写 。 























var string1="The quick brown fox"; 


var subl=string1.toLowerCase(); //sub1 的 内 容 是 "the quick brown fox" 
容 是 


var sub2=string1.toUpperCase(); //sub2 的 内 容 是 "THE QUICK BROWN FOX" 




















5.3 布尔 值 





















































布尔 类 型 的 数据 只 有 两 个 值 ，true( 真 ) 或 false〈 假 ) ， 最 常用 于 
保存 逻辑 操作 的 结果 。 
var answer=confirm("Do you want to continue?");  ”//answer 的 值 会 是 true 或 fal 
se 





























如 果 布 尔 值 




















于 计算 ，JavaScript 自 动 把 true 转 换 为 1， 把 false 转 换 为 











0。 





var answer=confirm("Do you want to continue?");  ”//answer 的 值 会 是 true 或 fal 
se 


alert(answer*1); // ”结果 会 是 9 或 1 














在 对 布尔 类 型 的 变量 进行 赋值 时 ， 注 意 不 要 把 值 包含 在 引号 里 ， 否 则 值 会 当 作 字符 串 处 











E B 
H: 

var success = false; // 正 确 

var success = "false"; // 错 误 



















































































还 有 另外 一 种 使 用 方式 : JavaScript 把 非 0 值 当 作 true 来 处 理 ， 把 0 值 
当 作 false 来 处 理 。 下 面 这 些 值 在 JavaScript 里 都 当 作 false 处 理 : 
e 布尔 值 false 
。 未 定义 (undefined) 
e null 
e 0 
e NaN 








I 上 面 这 些 值 通常 称 为 “类 假 "”， 也 就 是 说 ,“ 不 是 确切 的 false， 但 当 作 false 处 理 ”。 


“ 非 ” 操 作 符 (! 














HFR ”位 于 布尔 变量 之 前 时 ，JavaScript 把 它 解 释 为 “ 非 ”?” 也 就 








是 “相反 的 值 ?。 比 如 下 面 这 段 代 码 : 














var success=false; 
alert(!success); // 显示 "true" 
























































根据 结果 执行 不 同 的 操作 。 











第 6 章 里 将 使 用 它 和 其 他 一 些 操作 符 来 检测 JavaScript 变 量 的 值 ， 























JavaScript 还 有 两 个 含义 很 直观 的 关键 字 : null CF) Allundefined (REX) 。 


当 我 们 想 让 变量 具有 有 效 值 ， 却 又 不 是 任何 具体 值 





Ms 就 把 null 赋 给 变量 。 对 于 数值 来 




















说 ，null 相 当 于 0; 对 于 字符 串 来 说 ，null 相 当 于 空 字符 串 " 
false。 





; 对 于 布尔 变量 来 说 ，null 表 示 





























my 
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与 null 不 同 的 是 ，undefined 不 是 关键 字 ， 而 是 预定 义 的 全 局 变量 。 当 某 个 变量 已 经 在 语句 
有 使 用 了 ， 但 却 没有 被 赋予 任何 值 时 ， 它 的 值 不 是 0 或 null， 而 是 undefined， 表 示 JavaScript 不 
H 








5.4 数组 
数组 这 种 数据 类 型 可 以 在 一 个 变量 里 保存 多 个 值 ， 每 个 值 都 有 一 个 
人 
函数 、 对 象 ， 甚 至 是 其 他 数组 。 
5.4.1 创建 新 数组 
创建 数组 的 语法 并 不 新 奇 ， 因 为 数组 也 是 一 个 对 象 而 已 : 
var myArray = new Array(); 
创建 数组 还 可 以 使 用 另外 一 种 方便 的 形式 ， 只 要 使 用 一 对 方 括号 即 









































































































































可 : 


var myArray = []; 


5.4.2 ”初始 化 数组 

在 创建 数组 时 可 以 同时 加 载 数据 : 

var myArray = ['Monday', 'Tuesday', 'Wednesday']; 
或 者 ， 在 数组 创建 之 后 ， 添 加 元 素数 据 : 


var myArray = []; 
myArray[0] = Monday ; 
myArray[1] ‘Tuesday’ 5 
myArray[2] ‘Wednesday ' ; 




















array.length 
数组 都 有 一 个 length 属 性 ， 表 示 数 组 包含 了 多 少 项 。 当 我 们 给 数组 


添加 或 删除 项 目 时 ， 这 个 属性 是 自动 更 新 的 。 对 于 上 面 那个 数组 ， 
myArray.length 的 值 是 3。 

































































长 度 的 值 总 是 比 最 大 索引 的 值 大 1， 即 使 数组 中 实际 的 元 素数 量 没有 这 么 多 。 举 例 来 说 ， 
假设 我 们 给 前 面 那个 数组 添加 一 个 新 元 素 : 


myArray[50] = ‘Ice creamday' ; 
myArray.length 现 在 的 值 就 是 51， 即 使 数组 中 实际 只 包含 4 个 元 素 。 

5.4.3 ”数组 的 方法 
表 5.3 列 出 了 数组 最 常用 的 一 些 方法 。 


表 5.3 数组 的 常用 方法 


































































































方法 首 述 
concat 合并 多 个 数组 
join 把 多 个 数组 元 素 合并 为 一 个 字符 串 
toString 以 字符 串 形式 返回 数组 
indexOf 在 数组 搜索 指定 元 素 
lastIndexOf 返回 与 搜索 规则 匹配 的 最 后 一 个 元 素 
slice 根据 指定 的 索引 和 长 度 返回 一 个 新 数组 


























sort 根据 字母 顺序 或 提供 的 函数 对 数组 进行 排序 





splice 在 数组 指定 索引 添加 或 删除 一 个 或 多 个 元 素 





























数组 与 字符 串 的 一 些 方法 具有 相同 的 名 称 ， 甚 至 是 几乎 类 似 的 功能 。 使 用 时 请 注意 这 
方法 所 处 理 的 数据 类 型 ， 否 则 可 能 得 不 到 预想 的 结果 。 





IE 











concat() 


前 面 已 经 介绍 过 字符 串 的 连接 ，JavaScript 的 数组 也 有 同名 的 一 个 方 


法 : 
var myOtherArray = ['Thursday', 'Friday']; 
var myWeek = myArray.concat(myOtherArray) ; 























数组 myWeek 包 含 的 元 素 是 Monday、Tuesday、Wednesday、 
Thursday 和 Friday。 


join0 
这 个 方法 可 以 把 数组 的 全 部 元 素 连接 在 一 起 形成 一 个 字符 串 : 
var longDay = myArray.join(); 


uo 











longDay 的 值 是 “MondayTuesdayWednesday”。 


使 用 这 个 方法 时 还 可 以 有 一 个 字符 串 参 数 ， 它 会 作为 分 隔 符 插入 到 
最 终 的 字符 串 里 : 

































































var longDay = myArray.join("-"); 
这 时 longDay 的 值 就 是 “Monday-Tuesday-Wednesday”。 
toString() 


这 个 方法 可 以 说 是 join(0) 方 法 的 一 个 特例 。 它 返回 由 数组 元 素 组 成 


























的 字符 串 ， 用 逗号 分 隔 每 个 元 素 : 
var longDay = myArray.toString(); 


longDay HJ É 4 “Monday, Tuesday, Wednesday” o 








indexOf() 


























这 个 方法 找到 指定 元 素 在 数组 里 第 一 次 出 现 的 位 置 ， 返 回 指定 元 素 
的 索引 值 ， 如 果 没 有 找到 ， 就 返回 -1。 






























































myArray.indexOf('Tuesday');  // 返 回 1( 记 住 : 数组 索引 从 6 开始 ) 
myArray.indexOf('Sunday'); // 返 回 -1 


























lastIndexOf() 





从 名 称 中 可 以 看 出 ， 这 个 方法 的 工作 方式 与 indexOfO 一 样 ， 但 返回 
指定 元 素 在 数组 里 最 后 一 次 出 现 的 位 置 ， 而 不 是 第 一 次 出 现 的 位 置 。 












































slice() 


如 果 想 从 当前 数组 中 提取 一 个 子 集 ， 
指定 开始 的 索引 值 和 要 提取 的 元 素数 量 


var myShortWeek = myWeek.slice(1, 3); 


myShortWeek 包 含 的 内 容 是 Tuesday、Wednesday 和 Thursday。 
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J 以 使 用 这 个 方法 ， 在 参数 中 























sort() 
这 个 方法 可 以 把 数组 元 素 按照 字母 顺序 排列 。 
myWeek.sort() 














ìk ElFriday, Monday, Thursday. Tuesday#l!Wednesday. 





splice() 




















这 个 方法 可 以 在 数组 里 添加 或 删除 指定 的 一 个 或 多 个 元 素 。 

与 前 面 的 其 他 方法 相 比 ， 它 的 语法 有 点 复杂 : 
array.splice(index, howmany, [new elements]); 

第 一 个 参数 指定 在 数组 的 什么 位 置 进行 操作 ， 第 二 个 参数 说 明 要 删 


除 多 少 个 元 素 〈 设 置 为 0 表示 不 删除 元 素 ) ， 第 三 个 参数 是 可 选 的 ， 是 
要 插入 的 新 元 素 列表 。 


myWeek.splice(2,1,"holiday") 


这 行 代码 指向 索引 为 2 的 元 素 (Wednesday) ， 删 除 1 个 元 素 
(Wednesday) ， 插 入 1 个 新 元 素 (holiday) ;现在 数组 myWeek 包 含 u 
元 素 是 Monday、Tuesday、holiday、Thursday、Friday。 这 个 方法 的 返 
值 是 被 删除 的 元 素 。 

















































































































splice() 方 法 会 改变 原 数组 。 如 果 代 码 的 其 他 部 分 仍 需 使 用 这 个 数组 ， 需 在 使 用 splice() 方 
法 之 前 把 它 拷贝 到 新 的 变量 里 。 



































数组 操作 


现在 来 实际 使 下 前 面 介绍 的 方法 。 打 开 文 本 编辑 软件 ， 输 入 程序 清单 5.1 所 示 的 
代码 ， ee 





























程序 清单 5.1 数组 操作 








<!DOCTYPE html> 
<html> 
<head> 
<title>Strings and Arrays</title> 
<script> 
function wrangleArray() { 
var sentence = “JavaScript is a really cool language"; 
var newSentence = ""; 
//Write it out 
document.getElementById("divi").innerHTML = "<p>" + sentence + 
we "</p>"; 
//Convert to an array 
var words = sentence.split(" "); 
// Remove 'really' and ‘'cool', and add ‘powerful' instead 
var message = words.splice(3,2,"powerful") ; 
// use an alert to say what words were removed 
alert('Removed words: ' + message); 
// Convert the array to a string, and write it out 
document .getElementById("div2").innerHTML = "<p>" + words.join(" 
=") + "</p>"; 
} 
</script> 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
<script>wrangleArray();</script> 
</body> 
</html> 


在 查看 上 述 代码 时 ， 可 以 参考 前 面 对 于 这 些 方法 的 定义 ， 以 及 第 4 章 对 于 
getElementById0 和 innerHTML() 方 法 的 介绍 。 


在 wrangleArray0) 函 数 里 ， 我 们 首先 定义 了 一 个 字符 串 : 
var sentence = RS is a really cool language"; 
在 利用 innerHTML 方法 把 它 写 到 一 个 空 的 <div> 元 素 之 后 ， 我 们 对 字符 串 使 用 了 splitO 
方法 ， 以 一 个 空格 作为 参数 ， AINEI ata, 数组 的 每 个 元 素 都 是 字符 串 根据 空格 进 
行 分 隔 的 子 串 〈 也 就 是 单个 的 单词 ) 。 这 个 数组 保存 到 变量 words 里 。 


接着 对 words 数 组 使 用 splice() 方 法 ， 在 索引 位 置 3 删除 两 个 单词 “really> 和 “cool”。 因 为 
splice() 方 法 把 删除 的 元 素 作 为 返回 值 ， 所 以 我 们 可 以 把 它们 显示 在 alert() 对 话 框 里 : 





























































































































var message = words.splice(3,2, "powerful"); 
alert('Removed words: ' + message); 
然后 ， 我 们 对 数组 使 用 join() 方 法 ， 再 次 把 它 组 合成 字符 串 。 由 于 使 用 了 空格 作为 join 


的 参数 ， 字 符 串 里 每 个 单词 都 会 以 一 个 空格 间隔 。 最 后 ， 我 们 利用 innerHTML 把 修改 过 的 
句子 输出 到 第 二 个 <div> 元 素 。 



















































































wrangleArray() 函 数 被 文档 body 部 分 的 一 小 段 代 码 调 


<script>wrangleArray();</script> 
这 段 脚本 的 操作 结果 如 图 5.2 所 示 。 
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5.2 数组 操作 脚本 的 输出 
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5.5 “小结 

本 章 介绍 了 JavaScript 支 持 的 多 种 数据 类 型 ， 还 介绍 了 JavaScript 里 
字符 串 和 数组 的 一 些 方法 。 

第 5 章 到 此 就 结束 了 ， 也 结束 了 本 书 的 第 一 部 分 。 这 部 分 内 容 主 要 
是 JavaScript 的 基本 知 VW: JavaScript 是 什么 、 源 自 于 哪里 、 它 能 做 什么 
以 及 如 何 实现 一 些 基 本 功能 ， 比 如 声明 变量 、 赋 值 和 进行 计算 。 

这 部 分 还 介绍 了 JavaScript 一 些 内 置 对 象 和 DOM 对 象 ， 练 习 了 如 何 
使 用 它们 的 居 性 和 方法 ， 本 书 的 第 二 部 分 将 介绍 如 何 创建 自己 的 对 象 及 
属性 ， a 其 中 会 涉及 “面向 对 象 编 
TE” COOP) 的 基本 知识 

为 了 表达 清晰 ， 第 一 部 分 使 用 了 一 些 不 是 “最 佳 方式 ”的 编码 技术 ， 
虽然 它们 都 是 非常 合乎 规则 的 。 第 二 部 分 里 会 尽力 对 此 做 出 修正 ， 介 绍 
更 Ne eal 其 他 高 级 JavaScript 技 术 ， 包 括 程序 流 控制 、 
cookie、JSON 标 签 等 。 


5.6 问答 


问 : JavaScript 里 字符 串 的 长 度 最 大 是 多 少 ? 


























答 : JavaScript 规 范 并 没有 规定 字符 串 的 最 大 长 度 ， 这 应 该 是 由 浏 
览 器 和 操作 系统 决定 的 。 对 于 特定 的 运行 环境 来 说 ， 它 应 该 是 由 可 用 内 
存 决 定 的 一 个 数值 。 


问 : JavaScript 是 否 支 持 联 合 数组 ? 


E: 不 是 直接 支持 的 ， 但 可 以 利用 对 象 来 实现 这 种 行为 。 本 书后 
面 将 会 介绍 这 方面 的 范例 。 

























































































5.7 作业 








请 先 
5.7.1 测验 
1. 使 | 


回答 问题 ， 





























a. 


b. 


如 下 哪个 语句 把 字符 串 string2 附 加 到 字符 串 





再 参考 后 面 的 答案 。 











F string 1? 


concat(string1) + concat(string2); 


string1.concat(string2); 


c. join(string1, string2); 


2. 下 列 哪个 语句 把 变量 

















a. var paid = true; 


b. var paid = "true"; 


c. var paid.true(); 























stupid is as stupid does”, 


paid 的 值 设置 为 布尔 值 true? 





下 列 哪个 语 


能 把 string2 添 加 到 string1 的 末尾 。 


3. 字符 串 myString 的 内 容 是 “ 
句 的 返回 值 是 -1? 
a. myString.indexOf("stupid"); 
b. myString.lastIndexOf("stupid"); 
c. myString.indexOf("is stupid"); 
5.7.2 ”答案 
1. 选 b。 这 样 使 用 concat() 方 法 才能 
2 


. 选 a。 布 尔 值 























应 该 位 于 
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wot 














3. vic. FFF “is stupid” 
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5.8 ”练习 


修改 程序 清单 5.1 的 代码 ， 让 用 户 通过 promptO 对 话 框 输入 初始 字符 
串 。 利 用 本 章 介绍 的 其 他 字符 串 和 数组 方法 来 扩展 这 个 脚本 。 



































































































































习 具 有 相同 名 称 的 字符 串 和 数组 方法 ， 熟 悉 这 些 方法 在 应 用 于 5 
符 串 或 数组 时 如 何 具有 不 同 的 语法 和 操作 。 
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第 二 部 分 JavaScripti ir 
第 6 章 “ 功 能 更 强大 的 脚本 

第 7 音 “ 面 向 对 象 编程 


第 8 章 JSON 简 介 























第 9 章 ” 响 应 事件 


第 10 章 ”JavaScript 和 cookie 


第 6 章 ”功能 更 强大 的 脚本 
本 章 主要 内 容 包括 ， 


使 用 条 件 语句 
使 用 比较 操作 符 
使 用 逻辑 操作 符 
编写 循环 和 控制 结构 
调试 脚本 

AN 


本 书 第 一 部 分 的 内 容 简要 介绍 了 JavaScript 变 量 能 够 处 理 的 数据 类 
型 ， 然 而 为 了 实现 更 复杂 的 功能 ， 我 们 还 需要 脚本 能 够 根据 这 些 数据 进 
行 判断 。 本 章 将 介绍 如 何 对 特定 条 件 进行 判断 ， 让 程序 按照 预定 的 方式 
执行 。 

本 章 还 会 介绍 如 何 
JavaScript 程 序 。 
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于 浏览 器 的 工具 来 调试 这 些 越 来 越 复杂 的 





6.1 条 件 语句 


正如 其 名 称 所 表示 的 ， 条 件 语句 用 于 检测 脚本 中 变量 所 保存 的 值 是 
否 满足 指定 的 条 件 。JavaScript 里 的 条 件 语句 有 多 种 ， 详 述 如 下 。 













































































6.1.1 if() 语 句 




















前 一 章 介 绍 了 布尔 变量 
(false) 。 
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ay 





有 两 个 可 能 的 取 值 : 真 (true) 或 假 


























JavaScript 有 多 种 方式 可 以 检测 这 样 的 值 ， 最 简 入 
本 形式 如 下 : 














的 是 和 f 语 句 ， 其 基 








if ( 条 件 为 真 ) 执行 操作 











下 面 来 看 一 个 小 例子 : 


var message = ""; 
var bool = true; 
if(bool) message = 


首先 是 声明 一 个 变量 message， 给 它 赋 一 个 空 字 符 串 值 。 接 着 声明 
了 一 个 布尔 变量 bool， 把 它 的 值 设 置 为 tue。 第 三 条 语句 检测 变量 bool 的 
值 是 否 为 tue。 如 果 结 果 是 肯定 的 (如 本 例 的 情况 ) ， 变 量 message 的 值 
就 被 设置 为 新 的 字符 串 。 如 果 第 二 个 语句 把 变量 bool 的 值 设 置 为 false， 
那么 第 三 个 语句 里 的 检测 结果 就 是 否定 的 ， 给 message 变 量 设 置 新 字符 
串 的 指令 就 会 被 忽略 ， 从 而 让 它 的 值 仍然 是 空 字 符 串 。 





"The test condition evaluated to TRUE"; 
































































































































记 住 ， 站 语句 的 基本 形式 是 这 样 的 : 

















if ( 条 件 为 真 ) 执行 操作 









































在 使 用 布尔 变量 的 情况 下 《如 本 例 所 示 ) ， 我 们 
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件 。 这 是 因为 布尔 变量 的 值 只 能 是 true 或 false， 所 以 括号 里 内 容 的 结果 
传递 给 许 语句 时 ， 只 会 是 true 或 false。 


如 果 需 要 检测 false 条 件 ， 可 以 使 用 表示 “ 非 "的 字符 “! ”( 前 一 章 介 
met) ， 























if(!bool) message = "The value of bool is FALSE"; 
显然 ， 为 了 让 !bool 的 结果 为 tue，bool 的 值 必须 为 false。 
6.1.2 ”比较 操作 符 
if0) 语 句 并 不 是 只 能 检测 布尔 变量 的 值 ， 而 是 可 以 在 所 号 里 输入 表 
XE : 









































达 式 作为 条 件 。JavaScript 会 计算 表达 式 的 值 ， 判 断 其 结果 是 真 还 是 假 
var message = ""; 

var temperature = 60; 

if (temperature < 64) message = "Turn on the heating!"; 





小 于 号 (<) 是 JavaScript 支 持 的 多 种 比较 操作 符 之 一 。 表 6.1 列 出 了 
一 些 常用 的 比较 操作 符 。 














表 6.1 。 JavaScript 比较 操作 符 


























操作 符 含义 
= 等 于 
三 = 三 值 和 类 型 都 相等 
I= 不 等 于 
> 2a 
< 小 于 












































附录 B 提 供 了 比较 操作 符 的 更 详细 列表 。 
6.1.3 测试 相等 


仍然 以 前 面 的 代码 为 例 ， 我 们 如 何 判 断 温度 正好 等 于 64 度 呢 ? 


JavaScript 利 用 等 号 (= ) 给 变量 赋值 所 以 判断 相等 时 不 能 这 样 书写 代 
码 : 


if(temperature = 64) ... 


JavaScript 会 计算 表达 式 的 值 ， 如 果 像 上 面 这 样 书写 代码 ， 变 量 
temperature 会 被 赋值 64。 若 赋值 操作 成 功 完 成 (没有 什么 不 成 功 的 理 
ee eee 被 执行 。 显 然 ， 
这 不 是 我 们 想 要 的 结 


为 了 要 测试 值 是 否 相等 ， 需 要 使 用 双 等 号 (=) : 
















































































if (temperature == 64) message = "64 degrees and holding!"; 




















如 果 想 判断 两 项 在 值 和 类 型 上 都 相同 ，JavaScript 使 用 三 等 号 (===) 操作 符 。 举 例 来 说 : 





// 给 变量 赋予 数值 
// 结 果 为 true， 因 为 字符 串 "2" 会 被 解 ae ae 
// 结 果 为 false， 因 为 字符 串 与 数值 类 型 不 


























这 种 判断 方式 很 适合 区 分 返回 的 结果 是 实际 的 false， 还 是 等 同 于 false 的 值 ， 比 如 : 











var x=0; // 给 变量 赋值 9 
if(!x).. // 结 果 为 true 
if(x===false).. // 结 果 为 false 

















6.1.4 ”让 进 阶 












































执行 多 行 语句 ， 怎 么 办 ? 
































在 前 面 的 范例 里 ， 当 条 件 满足 时 ， 只 能 执行 一 条 语句 。 如 果 我 们 想 








这 时 可 以 使 对 花 括 号 ， 把 需要 在 条 们 





去 : 





满足 时 执行 的 语句 包含 进 





if (temperature<64) { 
message="Turn on the heating!"; 
heatingStatus="on"; 
// 其 他 语句 








| 





还 可 以 给 if 语句 添加 一 个 子 句 ， 当 条 件 不 ; 


苏 足 时 执行 相应 的 操作 : 





if (temperature<64) { 
message="Turn on the heating!"; 
heatingStatus="on"; 
// 其 他 语句 





message="Temperature is high enough"; 
heatingStatus="off"; 
// 其 他 语句 




















[提示 : | 
if0 语 句 有 一 种 简便 语法 : 





(条 件 为 真 )》 ? [条 件 为 真 执行 的 语句 ] : [条 件 为 假 执 行 的 语句 ]; 





范例 如 下 : 





errorMessage=count+((count==1)? "error":"errors")+"found."; 














在 这 个 例子 里 ， 如 果 变 量 count 里 保存 的 错误 数量 的 确 是 1 








， errorMessage 变 量 保存 的 内 容 


‖ 就 是 “1 error found”. 





| 如 果 count 变 量 的 值 是 0 或 大 于 1 的 ，errorMessage 变 量 保存 的 内 容 就 类 似 于 “3 errors 


| found”. 





6.1.5 ”测试 多 个 条 件 


利用 * 息 套 ” 的 多 个 过 和 else 语 句 可 以 检测 多 个 条 件 ， 分 别 执行 不 同 的 
继续 前 面 的 调 温 范例 ， 添 加 功能 ， 如 果 温 度 过 高 ， 就 打开 冷却 系 
























































if(temperature < 64) { 
message = "Turn on the heating!"; 
heatingStatus = "on"; 
fanStatus = "off"; 

} else if(temperature > 72){ 


message = "Turn on the fan!"; 
heatingStatus = "off"; 
fanStatus = "on"; 

} else { 
message = "Temperature is OK"; 


heatingStatus = "off"; 
fanStatus = “Orn 
} 


6.1.6 ”switch 语句 

















如 果 需 要 对 同一 个 条 件 语 句 的 多 种 不 同 可 能 进行 判断 ， 更 简洁 的 语 
法 是 使 用 JavaScript 的 switch 语 句 。 








switch(color) { 


case "red" : 
message = "Stop!"; 
break; 
case "yellow" : 
message = "Pass with caution"; 
break; 
case "green" : 
message = "Come on through"; 
break; 
default : 
message = "Traffic light out of service. Pass only with great 
care"; 


} 


























关键 字 switch 之 后 用 圆 括号 包含 要 判断 的 变量 。 

















实际 的 判断 操作 位 于 一 对 花 括号 里 。 每 个 case 语 句 对 应 的 值 包含 在 
引 号 里 ， 然后 是 个 冒号 ， E 着 是 满足 当前 条 件 要 执行 的 语句 ， 语句 的 
量 没有 限制 。 































































































注意 每 个 case 里 的 break 语 句 ， 它 会 在 case 部 分 的 语句 执行 完成 立 
后 ， 把 程序 转 到 switch 语 句 的 末尾 。 如 果 没 有 这 个 break 语 句 ， 就 可 能 有 
多 个 case 区 域 的 语句 被 执行 。 


default 部 分 是 可 选 的 ， 可 以 在 任何 case 都 不 匹配 的 情况 下 执行 一 些 
操作 。 


6.1.7 ERER 


有 时 需要 判断 组 合 条 件 来 决定 进行 什么 操作 ， 这 时 使 用 if...else 或 
switch 语 句 都 会 显得 不 那么 简洁 。 


还 是 以 调 温 代码 为 例 。JavaScript 支 持 使 用 逻辑 “与 ”(&&) AIF 
Beak” (|) ， 如 下 所 示 : 


















































ba) 





C 



























































mii 





if (temperature >= 64 && temperature <= 72) { 


message = "The temperature is OK"; 
} else { 
message = "The temperature is out of range!"; 

















这 个 条 件 就 是 ， 如 果 温 度 大 于 等 于 64 而 且 小 于 等 于 72。 
利用 逻辑 “或 "同样 可 以 实现 上 述 条 件 : 


if (temperature < 64 || temperature > 72) { 




















message = "The temperature is out of range!"; 
} else { 
message = "The temperature is OK"; 























我 们 颠倒 了 进行 判断 的 方式 ， 条 件 被 设置 为 “如 果 温度 小 于 64 或 大 
于 72”， 就 表示 超过 了 温度 范围 。 
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6.2 ”循环 和 控制 


结构 

















ifs A) a) WAVE ETE) 
程序 从 不 同 的 路 径 上 执行 ; 


在 很 多 情况 下 ， 我 们 





BE. 





数 是 固定 的 ， 我 们 当然 可 
数 ， 但 代码 会 变 得 很 多 ， 























需要 把 某 个 操作 反复 i 
以 利用 多 个 if 语 句 ， 并 


亨 执 行 的 交叉 路 口 ， 根 和 
































据 对 数据 的 判 







































































不 确定 的 ， 比 如 保存 变量 

















行 。 如 果 这 种 操作 的 次 
利用 一 个 变 咎 





` 易 阅读 。 而 且 ， 如 果 REBET 
里 的 会 改变 的 数值 ， 








那么 应 该 ; 

















JavaScript 提 供 了 多 种 内 





6.2.1 while 























while 语 名 的 语法 与 让 语句 十 分 类 似 : 
while(this condition is true) { 
carry out these statements 


while 语 句 的 工作 方式 也 类 似 于 if， 





断 执 行 之 后 ，while 回 到 语句 的 开始 ， 















































断 结 果 为 tue，while 语 句 就 反复 执行 相 


应 的 代码 。 








只 








怎么 办 呢 ? 
的 循环 结构 可 以 实现 上 述 目标 。 


唯一 的 区 别 在 于 ， 在 完成 一 次 关 
再 对 条 件 ; 








要 条 件 尖 





var count = 10; 
var sum = Q; 
while(count > @) { 
sum = sum + count; 
count- -; 


} 


alert(sum) ; 


只 要 while 判 断 条 件 的 结果 是 tue， 花 括号 里 的 语句 就 会 被 反复 执 
行 ， 也 就 是 不 断 把 count 的 当前 值 累加 到 变量 sum 里 。 







































































当 count 减 少 为 0 时 ， 就 不 满足 条 件 了 ， 循 环 就 会 停止 ， 程 序 继续 执 
行 花 插 号 “}” 后 面 的 语句 。 这 时 ， 变 量 sum 的 值 是 : 


10+9+8+7+6+5+4+3+2+1=55 
































6.2.2 do...while 








do...while 结 构 在 操作 上 与 while 很 相似 ， 但 有 一 个 重要 的 区 别 。 它 
的 语法 如 下 : 

















do { 

these statements 
} while(this condition is true) 
正 的 区 别 在 于 ， 由 于 while 语 句 出 现在 花 括 号 “}” 之 后 ， 在 进行 条 


件 判 断 之 前 ， 代 码 块 会 执行 一 次 。 因 此 ，do...while 语 句 里 的 代码 块 至 
少 会 被 执行 一 
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6.2.3 for 


for 循 环 的 操作 也 类 似 于 while， 但 语法 更 复杂 一 点 。 在 使 用 for 循 环 
时 ， 我 们 可 以 指定 初始 条 件 、 判 断 条 件 〈 用 于 结束 循环 ) 、 每 次 循环 后 
修改 计数 变量 的 方式 ， 这 些 都 在 一 个 语句 里 ， 有 具体 语法 如 下 : 




























































































for (x=0; x<10; x++) { 
.执行 这 些 i EA 
} 
XA 个 语句 的 含义 是 : 








“x 的 初始 值 设置 为 0， 当 x 小 于 10 时 ， 每 次 循环 之 后 把 x 的 值 加 1， 
执行 相应 的 代码 块 ”。 


现在 利用 for 语 句 重新 编写 前 面 使 用 while 的 范例 : 
var count; 
var sum = Q; 
for(count = 10; count > @; count--) { 
sum = sum + count; 





































































































如 果 没有 提前 声明 计数 变量 ， 我 们 可 以 在 for 语 句 里 使 用 关键 字 var 
进行 声明 。 这 是 一 种 很 简便 的 方式 : 


























var sum = Q; 
for(var count = 10; count > @; count--) { 
sum = sum + count; 


} 


alert(sum); 

与 前 面 使 用 while 的 范例 一 样 ， 当 循环 结束 时 ， 变 量 sum 的 值 是 : 
10+9+8+7+6+5+4+3+2+1=55 
6.2.4 ”使 用 break 跳 出 循环 


break 语 名 在 循环 里 的 作用 与 其 在 switch 语 句 里 差不多 ， 它 中 断 循 
环 ， 把 程序 导向 右 花 括号 后 面 的 第 一 条 语句 。 


范例 如 下 : 




















































































































var count = 10; 

var sum = 0; 

while(count > @) { 
sum = sum + count; 
if(sum > 42) break; 
count--; 

} 


alert(sum) ; 


在 前 面 没有 break 语 句 的 范例 里 ， 变 量 sum 的 值 是 : 
10 + 9 


+8+7+6+5+4+3+2+ 






































1 = 55 
而 现在 ， 当 sum 的 值 达 到 
10+9+8+7+6+5=45 
if(sum>42) 的 条 件 就 满足 了 ， 就 会 执行 break 语 句 而 中 断 循环 。 























小 心 造成 无 限 循环 。 前 面 我 们 使 








的 循环 是 这 样 的 : 





while(count>86) { 
sum=sum+count ; 
count--}; 

} 








假设 去 掉 count--; 这 一 行 ， 那 么 每 次 while 判 断 变量 count 时 ， 都 会 发 现 它 的 值 大 于 0， 因 此 


循环 永远 


ete 


6.2.5 


for...in 是 一 种 特殊 的 循环 ，| 


REE 

















利用 








止 。 无 限 循环 会 导致 浏览 器 

















REIR, PA 





for...in 在 对 象 集 里 循环 
























































6.19 





的 代码 来 展示 它 是 妇 








程序 清 征 





H 











pi) 
EE 
十 


性 里 进行 循环 。 我 们 月 



































EJavaScript 错 误 ， 或 是 导致 浏览 器 














ao 





Pera A 


46.1 for...in 循 环 


<!DOCTYPE html> 
<html> 
<head> 
<title>Loops and Control</title> 
</head> 
<body> 
<script> 
var days = ['Sun','Mon','Tue', 'Wed','Thu', 'Fri','Sat']; 
var message = ""; 
for (i in days) { 
message += ‘Day ' + i+ ' is ' + days[i] + '\n'; 
} 
alert(message) ; 
</script> 
</body> 
</html> 


在 这 种 循环 中 ， 我 们 不 必 考 虑 使 用 循环 计数 器 ， 或 是 判断 循环 结束 
pu 循环 会 对 集合 中 每 个 对 象 〔 本 例 中 是 数组 元 素 ) 执行 一 次 ， 然 
BAK 
| 


在 JavaScript 里 ， 数 组 是 一 种 对 象 。 利 用 for...in 循 环 可 以 操作 任何 对 象 的 属性 ， 无 论 是 
| DOM 对 象 、JavaScript 内 置 对 象 还 是 我 们 创建 的 对 象 。 


上 述 范例 代码 的 执行 结果 如 图 6.1 所 示 。 
















































































6.1 for...in 循 环 的 运行 结果 








6.3 ”调试 代码 
随 着 脚本 不 断 变 得 更 加 复杂 ， 我 们 迟早 都 会 遇 到 代码 出 错误 的 情 




















ee \ 小 的 失误 都 可 能 导 致 JavaScript 错 误 ， 比如 起 始 与 结束 括号 不 

， 变 量 名 称 或 关键 字 输 入 错误 ， 调 用 不 存在 的 方法 ， 等 等 。 本 章 的 
EMRE T ARMENA PRHA E 产 生 错误 ， 需要 发 现 和 解 
i 






































遇 到 错误 时 ， 浏 览 器 的 反应 是 各 不 相同 的 。 现 在 来 看 看 程序 清单 
6.2 里 的 代码 。 








程序 清单 6.2 一 段 有 错误 的 代码 





<!DOCTYPE html> 
<html> 
<head> 
<title>Strings and Arrays</title> 
</head> 
<body> 
<script> 
function sayHi() { 
alert("Hello!); 
} 
</script> 
<input type="button" value="good" onclick="sayHi()" /> 
<input type="button" value="bad" onclick="sayhi()" /> 
</body> 
</html> 


这 段 代 码 有 两 种 不 同类 别 的 错误 。 首 先 ， 在 调用 alert() 方 法 时 ， 参 
HN TS. 









































其 次 ， 第 二 个 按钮 的 onClick 事 件 处 理 器 调用 了 函数 sayhi0， 但 由 于 
函数 名 称 是 区 分 大 小 写 的 ， 而 实际 上 并 没有 名 为 sayhi0 的 函数 。 


gts oe 而 ， 我 们 可 以 看 到 两 个 按钮 ， 一 个 标签 
是 “good”; 另 一 个 是 "bad”。 点 击 两 个 按钮 ， 似 乎 都 没有 什么 反应 。 在 
Si cer Ma 键 打开 Firefox 的 错误 控制 台 ， 可 以 看 到 如 图 
6.2 所 示 的 内 容 。 
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PS 














A Program With Errors - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 

















(CJA Program With Errors + > 
ee | E} filey/homeyphil/SAMS/06listingo2.htm| B~ 
good || bad | 
区 Error Console RE 
Bai | EQ Errors ‘1, Warnings @ messages clear 
Code: | Evaluate 


unterminated string literal 
file:///home/phil/sAMS/o06listing02.html Line: 9 


alert ("Hello!); 





























图 6.2 ”Firefox 的 错误 控制 台 


其 中 有 很 不 错 的 提示 ， 它 告诉 我 们 发 现 一 个 "未 结束 的 字符 串 *， 指 
明了 行 号 ， 甚 至 显示 出 那 行 代码 ， 并 且 用 一 个 箭头 指向 问题 所 在 的 部 







































































修改 这 个 错误 ， 保 存 文件 ， 再 次 尝试 。 先 点 击 错误 控制 台 上 的 “ 清 
除 ” 按 钮 ， 清 除 旧 的 错误 信息 ， 然 后 重新 加 载 页 面 。 


这 次 似乎 好 多 了 ， 页 面 正 常 显示 ， 错 误 控制 台 的 内 容 也 是 空 的 。 点 
标签 为 "good" 的 按钮 会 打开 预想 的 alert0 窗 口 ， 到 目前 为 止 ， 一 切 正 
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但 点 击 标签 为 "bad” 的 按钮 似乎 没有 反应 ， 这 时 再 次 查看 错误 控制 
台 ， 结 果 如 图 6.3 所 示 。 


























了 A Program With Errors - Mozilla Firefox cai 
File Edit View History Bookmarks Tools Help 

















EA Program With Errors | + & 
© @ A O fileynome/philsams/o6listingo2.html = 
good || bad | 

[= Error Console er 

(al EJ Errors 人 小 warnings @ messages | A lear 

Code: | Evaluate 

sayhi is not defined 
a file:y/fhome/phil/SAMS/O6listingO2.html Line: 1 



































6.3 第 三 个 错误 


Firefox 同 样 标 识 了 这 个 错误 : “sayhi 未 定义 "。 对 于 我 们 来 说 ， 很 容 
易 修 改 这 个 错误 ， 让 页 面 正常 运行 。 


不 同 的 浏览 器 具有 自己 处 理 错 误 的 方式 。 图 6.4 展 示 了 Chrome 浏 览 
器 如 何 报告 第 一 个 字符 串 未 结束 的 错误 。 
































[= A Program With Errors - Chromium 
@ A Program With Errors 


EEEN 





C ff Q file: PEREA html 


good | | bad | 





Ea Elements 图 Resources @ network » Q Search Console 





Warnings Logs 


GD | Errors 





@ Uncaught SyntaxError: Unexpected token ILLEGAL 
>| 





© >= Q |O <topframe> + 


O6ListingO2. html:9 





ol % 

















6.4 Google Chrome JavaScript}? ‘fi @ 























Chromium 几 乎 是 相同 的 浏览 器 ， 主 要 





Google Chrome 


其 打包 和 分 发 的 方式 。 简 











要 来 说 ，Google Chrome 就 是 Chromium 的 开源 版 本 。 


Chrome 的 消息 用 词 有 些 隐 了 星 : 
号 ”， 但 它 同 样 用 一 个 可 以 点 击 的 链接 指 昌 





















































“未 捕获 的 语法 错误 : 
出 错误 的 代码 行 。 


意外 的 非法 符 
































如 果 要 使 用 IE 9 的 开发 者 工具 ， 可 以 按 F12 键 ， 
择 “ 开 发 者 工具 ” 


提示 : 
H- 
使 
























































- 些 时 间 熟 悉 常 用 浏览 器 的 调试 工具 是 值得 的 。 但 如 果 经 
发 环境 进行 调试 是 更 好 的 选择 ， 这 样 效率 更 高 ， 





























或 从 “工具 
然后 选择 “控制 台 ” 选 项 卡 来 查看 JavaScript 返 民 














“sh st 
回 的 错 




















常 编写 JavaScript 代 码 ， 那 么 
调试 过 程 更 清晰 。 





实践 
循环 标题 


利用 本 章 介 绍 的 知识 编写 一 个 脚本 ， 在 页 面 上 循环 显示 一 些 图 像 。 这 种 效果 是 很 常见 
的 ， 比 如 滑动 显示 的 图 像 ， 或 是 不 断 变 换 的 广告 标题 。 


首先 要 介绍 两 个 新 东西 。 一 个 是 事件 处 理 器 : window 对 象 的 onLoad 方 法 。 它 的 操作 
很 简单 ， 只 要 像 下 面 这 样 把 它 添加 到 <body> 元 素 即 可 : 
























































<body onload="somefunction()" > 

















当 页 面 完成 加 载 时 ， 会 触发 onLoad 事 件 ， 就 会 执行 事件 处 理 器 里 指定 的 代码 。 利 用 这 
个 事件 处 理 器 ， 一 旦 页 面 加 载 完成 就 运行 我 们 的 代码 实现 标题 变换 。 


第 9 章 会 介绍 其 他 一 些 添 加 事件 处 理 器 的 方法 。 























男 一 个 新 东西 是 JavaScript 的 setInterval() 函 数 。 它 能 够 重复 运行 JavaScript 函 数 ， 每 次 
运行 有 一 定 的 间隔 。 


setInterval() 函 数 有 两 个 参数 ， 第 一 个 参数 是 要 重复 运行 的 函数 ， 第 二 个 参数 是 每 次 执 
行 的 时 间 间 隔 《〈 单 位 是 毫秒 ) 。 下 面 这 个 范例 : 


setIinterval(myFunc, 5000) 


会 每 隔 5 秒 运行 函数 myFunc()。 
利用 setInterval0 函 数 能 够 以 固定 间隔 变 换 标 题 图 像 。 
新 建文 件 banner.html， 输 入 程序 清单 6.3 的 代码 。 






























































程序 清单 6.3 ”标题 变换 





J 





<!DOCTYPE html> 


<html> 
<head> 
<title>Banner Cycler</title> 
<script> 
var banners = ["banner1.jpg", "banner2.jpg", "banner3.jpg"]; 


var counter = 0; 
function run() { 
V 


setInterval(cycle, 2000); 
} 
function cycle() { 
counter++; 
if(counter == banners.length) counter = ð; 
document. getElementById("banner").src = banners[counter]; 
} 
</script> 
</head> | 
<body onload = "run();"> 
<img id="banner" alt="banner" src="banner1.jpg" /> 
</body> 
</html> 





页 面 的 HTML 部 分 是 非常 简单 的 。 页 面 的 body 部 分 包含 一 个 图 像 元 素 ， 它 将 构成 标 
题 。 通 过 修改 它 的 scr 属 性 就 可 以 实现 图 像 变 换 。 


接着 来 看 看 JavaScript 代 码 。 


函数 run0 只 包含 一 个 语句 ， 就 是 setInterval0) 函 数 ， 后 者 每 隔 2 秒 〈2 000 毫 秒 ) PUTA 
一 个 函数 cycle()。 


cycle() 函 数 每 次 执行 时 完成 三 个 操作 : 
。 计数 器 增加 。 


countertt ; 


。 使 用 条 件 语句 判断 计数 器 是 否 达到 PP AR NEE E 
if (counter == banners.length) counter = Q; 
。 把 图 像 元 素 的 src 属 性 设置 为 图 像 文件 名 称 数组 里 相应 的 文件 名 。 

document.getElementById("banner").src = banners[counter]; 


代码 的 操作 结果 如 图 6.5 所 示 。 





































































































@ Banner Cycler x AS 
€ © C fi |O file:s//home/phi/sams/o6listingo3.htm| 六 图 四 加 入 
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/ © Banner cycler x AS 


€ © © fi |O file://nome/phi/SAms/oélistingo3.htm! vo o 




















图 6.5 ”标题 变换 


现在 使 用 浏览 器 的 调试 工具 检测 这 个 脚本 的 操作 。 在 使 用 Chromium 时 ， 打 开 调 试 工 
有 具 的 方法 是 选择 Wrench Icon>Tools>Developer Tools， 或 是 使 用 快捷 键 Ctrl+Shift+1。 

选择 下 方 窗 格 里 的 Scripts 选 项 卡 ， 左 侧 是 代码 。 点 击 第 15 行 代码 的 行 号 来 设置 一 个 断 
点 ， 如 图 6.6 所 示 。 



























































图 Elements Resources © Network "a scripts | Eb Timeline & Profiles e 


| P | O6iistingo3htmi $ 
<!DOCTYPE html> 
<html> 
<head> 
<title>Banner Cycler</title> 
<script> 
var banners = ["bannerl.jpg", "banner2.jpg", "banner3.jpg"]; 
var counter = 0; 
function run() { 
setInterval(cycle, 2000); 





wayauawner| å 


10 } 

11 function cycle() { 

12 counter++; 

13 if(counter == banners.length) counter = 0; 

14 document, getELementById("banner").srec = banners[counter]; 





16 |</script> 

17 | </head> 

18|<body onload = “run();"> 

19|<img id="banner" src="bannerl.jpq" /> 
20 |</body> 

21 |</html > 

















图 6.6 ”设置 断 点 


当 设置 了 这 个 断 点 之 后 ， 代 码 每 次 运行 到 这 行 时 ， 在 执行 其 中 的 代码 之 前 ， 都 会 暂 
停 。 在 本 例 中 就 是 在 结束 函数 cycle() 之 前 会 暂停 。 

在 这 个 窗 格 右 侧 的 Breakpoints 选 项 卡 里 可 以 看 到 我 们 设置 的 断 点 。 在 Watch 
Expressions 选 项 卡 里 可 以 添加 变量 或 表达 式 ， 在 程序 暂停 时 查看 它们 的 值 。 在 这 里 ， 我 们 
输入 counter 和 getElementById("Banner").src， 查 看 它们 的 值 。 


当 程 序 再 一 次 暂停 时 的 情况 如 图 6.7 所 示 ， 可 以 看 到 两 个 表达 式 的 值 。 




































































| Q Search Scripts [x] 

















counter; 1 
document .getElementById("banner").src: "file: ///home/phil/SAMS/banner2, jpg" 
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图 6.7 在 断 点 显示 变量 的 值 
点 击 选项 卡 上 方 的 Play， 可 以 让 脚本 重新 启动 。 
可 以 看 出 ， 利 用 浏览 器 的 调试 工具 ， 我 们 可 以 查看 脚本 的 运行 情况 。 


这 里 只 是 简单 地 展示 了 Google Chrome/Chromium 调 试 能 力 的 一 小 部 分 ， 如 果 想 进一步 了 解 ， 可 以 参 
考 http://code.google.com/chrome/devtools/docs/scripts-breakpoints.html 。 


如 果 使 用 的 是 Firefox， 最 好 是 安装 很 流行 的 Firebug 扩 展 。 它 的 功能 与 前 者 大 致 相同 ， 详 情 请 见 
http://getfirebug.com/javascript 。 


IE 9 中 打开 调试 工具 的 方法 是 按 F12 键 ， 关 于 它 的 介绍 请 见 http://msdn.microsoft.com/en- 
us/library/ie/dd565622(v=vs.85).aspx 。 


Opera 的 调试 工具 是 Dragonly， 详 情 请 见 http://www.opera.com/dragonly/documentation/ o 























6.4 ”小结 


本 章 介 绍 了 如 何 根据 变量 值 判断 条 件 并 控制 程序 流 ， 介 绍 了 多 种 
条 件 控制 的 循环 结构 。 


另外 还 简要 介绍 了 如 何 使 用 浏览 器 工具 追踪 并 修改 程序 里 的 错误 。 








































































































65 问答 


H: AAA ZA A Zt, ARATE ATUL F 
须 使 用 某 种 结构 呢 ? 


答 : 对 于 任何 特定 的 编程 任务 ， 通 常 都 有 多 种 循环 类 型 可 以 实 
现 。 但 最 好 还 是 根据 代码 的 整体 情况 挑选 最 合理 的 循环 方式 。 


H: 能 否 停 止 当前 循环 ， 直 接 进入 下 一 次 循环 ? 



































































































































答 : 可 以 ， 方 法 是 使 用 continue 命 令 。 它 的 使 用 方法 与 break 很 相 
似 ， 但 它 不 是 停止 循环 并 转 到 循环 体 后 面 的 语句 ， 而 是 只 中 断 当前 循 
环 ， 然 后 进入 下 一 次 循环 。 



















































































6.6 ”作业 


请 先 回答 问题 ， 再 参考 后 面 的 答案 。 





























6.6.1 测验 




















1. JavaScript 里 如 何 表 示 “ 大 于 等 于 ”? 





a. > 
b. >= 
C。 >== 


2. 哪个 命令 会 终止 当前 循环 ， 把 程序 流转 到 循环 体 后 面 的 语句 ? 





a. break; 
b. loop; 
c. close; 








3. 下 面 哪 种 情况 可 能 导致 无 限 循环 ? 
a. 使 用 错误 的 循环 类 型 
b. 终止 循环 的 条 件 永远 不 能 达到 
c. 循环 里 有 太 多 的 语句 

6.6.2 答案 

































































1. 选 b。JavaScript 以 “>=” 表 示 “ 大 于 等 于 ” 


2. 选 a。break 语 句 终止 循环 。 


3. 选 p。 如 果 终 止 循环 的 条 件 始终 不 能 达到 ， 就 会 造成 无 限 循环 。 





6.7 练习 


修改 实现 标题 循环 的 代码 ， 为 每 个 标题 添加 一 个 链接 ， 从 而 让 每 个 
显示 的 图 像 链接 到 一 个 外 部 页 面 。 























修改 实现 标题 循环 的 代码 ， 利 用 Math 对 象 的 随机 数 生成 功能 ， 在 每 
次 变换 标题 时 随机 显示 一 幅 图 像 ， 而 不 是 按照 次 序 显示 。 
























































利用 浏览 器 的 内 置 工 具 来 帮助 进行 代码 调试 。 

















第 7 草 ”面向 对 象 编程 
本 章 主要 内 容 包括 : 


什么 是 面向 对 象 编程 
创建 对 象 的 两 种 方式 
对 象 实例 化 
利用 prototype 扩 展 和 继承 对 象 
访问 对 象 的 方法 与 属性 
使 用 功能 检测 


随 着 程序 越 来 越 复 杂 ， 需 要 使 用 一 些 编码 技术 帮助 我 们 保持 对 代码 
的 掌控 ， 并 且 确 保 代码 的 有 效 性 、 易 读 性 和 可 维护 性 。 面 向 对 象 编程 是 
一 种 很 重要 的 技术 ， 有 助 于 编写 清晰 可 靠 的 可 以 重 使 的 代码 。 本 章 
将 介绍 这 方面 的 基本 知识 。 
































































































































































































































7.1 什么 是 面向 对 象 编程 COOP) 


本 书 前 面部 分 展示 的 代码 范例 都 属于 “过 程 编 程 的 类 型 ， 这 种 编程 
方式 的 特点 是 把 数 据 保存 到 变量 里 ， 然 后 由 一 系列 指令 操作 变量 。 每 个 
KS 〈 或 一 系列 指令 比如 函数 ) 都 和 E 够 创建 、 删 除 或 修改 数据 ， 显 得 
数据 与 程序 代码 在 某 神 程度 上 是 ， 分 离 ” 的 。 


在 面向 对 象 编程 (OOP) 方式 中 ， 程 序 指 令 与 其 操作 的 数据 密切 关 
联 。 换 名 话说 ，OOP 把 程序 的 数据 包含 在 被 称 为 "对 象 "的 独立 体 里 ， 
个 对 象 都 有 自己 的 属性 〈 数 据 ) 和 方法 (指令 ) 


举例 来 说 ， 如 果 要 编写 一 个 用 于 汽车 租赁 的 脚本 ， 我 们 可 以 设计 一 
个 通用 功能 的 对 象 Car， 它 具有 -一些 属性 〈 比 如 color、 year、 
odometerReading 和 make) ， 还 可 能 有 一 些 方法 (比如 
setOdometer(newMiles) 可 以 把 属性 odometerReading 的 值 设 置 为 
newMiles) 。 


i 对 于 租赁 清单 里 的 每 一 辆 汽车 ， 我 们 都 会 创建 Car 对 象 的 一 个 “ 实 
Bll” 


[说 明 : | HA: 
| 


| 对 象 的 实例 就 是 对 象 “ 模 块 ”的 特定 实现 ， 是 基于 特定 数据 的 能 够 工作 的 对 象 。 举 例 来 说 ， 
上 通用 的 对 象 模板 Car 可 以 创建 一 个 实例 ， 其 特定 数据 是 “blue 1998 Ford”， 还 可 以 创建 男 外 一 个 
| 实例 ， 其 特定 数据 是 “yellow 2004 Nissan”。 在 面向 对 象 编程 中 ， 这 下 对 象 模板 - 般 被 称 

为 “类 ”。 但 本 书 不 准备 使 用 这 个 术语 因为 Javascript 实 际 上 并 不 使 类 。 但 它 的 “构造 函 

| 数 ” 概 念 与 之 类 似 ， 具 体 介 绍 请 见 本 章 后 面 的 内 容 。 


与 过 程 编程 方式 相 比 ， 面 向 对 象 编程 有 不 少 优点 : 


。 代码 复 用 。 面 向 对 象 编程 能 够 以 多 种 方式 复 用 代码 。 利 用 普通 的 函 
数 也 能 实现 代码 复 用 ， 但 跟踪 全 部 需要 传递 的 变量 、 它 们 的 作用 域 
和 含义 是 很 困难 的 。 与 之 相 比 ， 如 果 使 用 对 象 来 实现 ， 我 们 只 需要 
标明 每 个 对 象 的 属性 和 方法 ， 保 证 它们 遵守 规则 ， 其 他 程序 ， 甚 至 
其 他 程序 员 都 可 以 轻松 地 使 用 这 些 对 象 。 
。 封装 。 通 过 仔细 地 设置 属性 和 方法 对 于 程序 其 他 部 分 的 “可 见 性 ”， 
我 们 可 以 定义 对 象 如 何 与 脚本 的 其 他 部 分 相互 作用 。 对 象 的 “大 
部 ”内 容 对 外 是 隐蔽 的 ， 外 部 代码 如 何 访问 对 象 的 数据 只 能 通过 对 
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在 编写 代码 时 ， 
编写 过 的 代码 几乎 是 相同 


经 常会 遇 到 这 样 的 情况 : 
但 不 完全 相 同 ， o 
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的 对 象 ， 设 置 它们 的 





面向 对 象 方法 ， 它 们 被 称 为 面向 对 象 
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面向 对 象 代 码 。 面 向 对 象 编程 
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的 支持 ， 让 我 们 可 以 编写 非常 实 





在 此 只 讨论 一 些 基 本 知识 。 


7.2 ”创建 对 象 


JavaScript 提 供 了 多 种 创建 对 象 的 方式 ， 首 先 来 介绍 如 何 声 明 对 象 
的 “直接 实例 *， 稍 后 会 介绍 使 用 “构造 函数 ,创建 对 象 。 


7.2.1 创建 直接 实例 


JavaScript 有 一 个 内 置 对 象 Object， 利 用 它 可 以 创建 一 个 空白 的 对 












































































































































myNewObject = new Object(); 


这 样 就 得 到 了 一 个 崭新 的 对 象 myNewObject， 这 时 它 还 没有 任何 属 
性 和 方法 ， 因 此 没有 任何 实际 功能 。 我 们 可 以 像 下 面 这 样 添加 属性 ; 


myNewObject.info = 'I am a shiny new object'; 
现在 对 象 有 了 一 个 属性 ， 它 是 文本 字符 串 ， 包 含 了 一 些 关 于 对 象 的 


信息 ， 其 名 称 是 info。 给 对 象 添加 方法 也 很 简单， 首先 定义 一 个 函数 ， 
然后 把 它 附加 到 myNewObject 作 为 方法 : 


function myFunc(){ 
alert(this.info) ; 














































































































】 
myNewObject.showInfo = myFunc; 


使 用 熟悉 的 句点 形式 ， 就 可 以 调用 这 个 方法 : 


myNewObject.showInfo() ; 















































在 把 函数 关联 到 对 象 时 ， 只 使 用 了 函数 名 称 ， 并 不 包含 括号 。 这 是 因为 我 们 是 要 把 函数 
myFunc() 的 定义 赋予 mynewObject.showInfo 方 法 。 


如 果 使 用 像 下 面 这 样 的 代码 : 





























myNewObject.showInfo = myFunc(); 









































其 作用 是 让 JavaScript 执 行 函数 myFunc0， 然 后 把 它 的 返回 值 赋予 mynewObject.showInfo。 


7.2.2 ”使 用 关键 字 this 


前 面 的 函数 定义 使 用 了 关键 字 this。 在 第 2 章 和 第 3 章 的 范例 里 ， 我 
们 在 内 骨 的 事件 处 理 器 里 也 使 用 过 this。 


<img src="tick.gif" alt="tick" onmouseover="this.src='tick2.gif';" /> 
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在 以 这 种 方式 使 人 
素 ) 。 而 当 我 们 在 函数 (或 方法 ) 里 使 用 this 时 ， 它 指向 函数 的 “ 父 对 















































在 函数 最 初 声明 时 ， 它 的 父 对 象 是 全 局 对 象 window。window 对 象 

































































并 没有 名 为 info 的 属性 ， 如 果 直 接 调 用 myFunc() 函 数 ， 会 发 生 错 误 。 
我 们 接着 给 myNewObject 对 象 创建 了 一 个 方法 showInfo， 并 且 把 




















myFunc() 赋 予 这 个 方法 : 
myNewObject.showInfo = myFunc; 


对 于 showJInfo() 方 法 来 说 ， 它 的 父 对 象 是 myNewObject， 所 以 
this.info 就 表示 myNewObject.info。 


现在 来 看 程序 清单 7.1， 进 一 步 说 明 上 述 概念 。 


























程序 清单 7.1 创建 对 象 





<!DOCTYPE html> 
<html> 
<head> 
<title>Object Oriented Programming</title> 
<script> 
myNewObject = new Object(); 
myNewObject.info = 'I am a shiny new object'; 
function myFunc(){ 
alert(this.info) ; 
} 
myNewObject.showInfo = myFunc; 
</script> 
</head> 
<body> 
<input type="button" value="Good showInfo Call" 
onclick="myNewObject.showInfo()" /> 
<input type="button" value="myFunc Call" onclick="myFunc()" /> 
<input type="button" value="Bad showInfo Call" onclick="showInfo()" 
/> 
</body> 
</html> 


在 页 面 的 <head> 区 域 ， 我 们 像 前 面 一 样 创建 了 一 个 对 象 ， 设 


性 info 和 一 个 方法 showInfo。 


在 浏览 器 里 加 载 页 面 ， 我 们 可 以 看 到 三 个 按钮 。 
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新 建 对 象 的 showInfo 方 法 : 








点 击 第 一 个 按钮 会 1 
<input type="button" value="Good showInfo Call" 
#onclick="myNewObject.showInfo()" /> 


与 预想 的 一 样 ，info 属 性 的 值 传递 给 alert0 对 话 框 ， 如 图 7.1 所 示 。 
































7b all 


E 确 地 调 























jinfo 属 性 





第 二 个 按钮 试图 直接 调用 函数 myFuncO。 


<input type="button" value="myFunc Call" onclick="myFunc()" /> 





对 象 作为 父 对 象 ) ， 


由 于 myFunc 是 全 局 对 象 
它 会 试图 给 
window.info 的 值 ， 其 结果 如 图 7.2 所 示 。 





合 alert() 对 话 框 传递 一 个 并 不 存在 的 属性 


的 一 个 方法 (因为 它 定义 时 














图 








7.2 全 局 变量 没有 名 为 info 的 属性 











<input type="button" 


最 后 ， 第 三 个 按钮 尝试 在 没 














没有 指定 任何 








了 指定 父 对 象 的 情况 下 调用 showInfo 方 


value="Bad showInfo Call" onclick="showInfo()" /> 




















由 于 这 个 方法 在 对 象 myNewObject 之 外 是 不 存在 的 ，JavaScript 会 报 
告 一 个 错误 ， 如 图 7.3 所 示 。 
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@ p Uncaught ReferenceError: showInfo is not O7listingOl, html :17 
defined 
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<top frame> + 

















7.3 JavaScript 报 告 showInfo 没 有 定义 
说 明 : 











关于 如 何 使 用 浏览 器 的 JavaScript 控 制 台 或 错误 控制 台 了 解 JavaScript 错 误 ， 请 参考 第 6 章 的 
内 容 。 




















7.2.3 ”匿名 函数 











前 面 介绍 了 一 种 设置 对 象 方法 的 方式 ， 就 是 创建 一 个 单独 的 函数 ， 
然后 把 它 的 名 称 赋 予 某 个 方法 。 现 在 来 介绍 一 种 更 简单 方便 


的 方式 。 
前 面 的 代码 是 这 样 的 : 














function myFunc(){ 
alert(this.info) ; 


}; 


myNewObject.showInfo 


myFunc; A 


同样 的 功能 可 以 这 样 实现 : 


myNewObject.showInfo 





function() { 


alert(this.info) ; 


















































于 在 这 种 方式 中 并 不 需要 给 函数 命名 ， 所 以 被 称 为 “匿名 函数 ”。 
使 用 类 似 的 语句 ， 我 们 可 以 给 实例 化 的 对 象 添加 任意 多 的 属性 和 方 






































JSON (JavaScript 对 象 标签 》 技 术 直 接 创建 对 象 的 实例 ， 具 体 介 绍 请 


























法 o 
JavaScript 还 可 以 使 
见 第 8 章 。 
7.2.4 ”使 用 构造 函数 
如 果 只 需 








重复 整个 过 


只 有 一 个 全 








算 不 错 。 但 如 果 要 
程 : 


应 该 只 有 一 个 相关 
性 。 











要 某 个 对 象 的 一 个 实例 ， 使 用 直接 创建 对 象 实例 的 方法 还 






































| 建 同一 个 对 象 的 多 个 实例 ， 使 用 这 种 方式 就 要 反复 











创建 对 象 、 添 加 属性 、 定 义 方法 等 。 








局 实例 的 


的 userProfile 对 象 ， 其 中 包含 他 或 她 的 姓名 、 最 后 访问 的 页 面 等 类 似 的 属 




















对 象 有 时 被 称 为 “ 单 例 ”， 在 有 些 场合 很 适用 。 举 例 来 说 ， 程 序 的 用 户 






































如 果 要 人 包 








建 可 能 




















有 多 个 实例 的 对 象 ， 更 好 的 方式 是 “对 象 构造 函 

















数 ”。 它 会 创建 某 种 模板 ， 方便 实现 多 次 实例 化 。 











new Object()， 而 是 先 声明 一 个 


有 使 用 关键 字 this 添 加 属 ' MERI 






























































查看 下 面 的 代码 ， 其 中 并 没有 使 用 
函数 myObjectType0， 然 后 在 它 的 定义 旦 









































法 > 
function myObjectType(){ 
this.info = 'I am a shiny new object'; 
this.showInfo = function(){ 

alert(this.info); // show the value of the property info 


} 
this.setInfo = function (newInfo) { 
= newInfo; // overwrite the value of the property info 


this.info 











个 方法 showInfo 和 setInfo。 前 一 个 
个 参数 newInfo， 























这 段 代码 添加 了 一 个 属性 info， 肉 
方法 显示 info 属 性 当前 保存 的 值 ， 后 一 个 方法 接收 


它 的 值 履 盖 info 属 性 的 值 。 


7.2.55 “对象 实例 化 


现在 可 以 创建 这 种 对 象 的 多 个 实例 ， 它 们 都 
数 里 定义 的 属性 和 方法 。 创 建 对 象 实例 被 称 为 “ 实 
在 定义 了 构造 函数 之 后 ， 就 可 以 方便 地 创建 对 象 的 实例 : 
var myNewObject = new myObjectType(); 


这 里 使 用 的 语法 与 ew ObjectO 相 同 ， 只 是 用 预先 定义 的 对 象 类 和 
Object， 这 样 实例 化 的 对 象 具有 构造 函数 里 定义 的 全 部 属性 和 方法 。 


现在 可 以 调用 它 的 方法 和 查看 它 的 属 
var x = myNewObject.info // x now contains 'I am a shiny new object' 
myNewObject.showInfo(); // alerts 'I am a shiny new object 

myNewObject.setInfo("Here is some new information"); 


info property 
如 果 要 创建 多 个 实例 ， 只 需要 多 次 使 用 构造 函数 就 可 以 了 : 


Na 




















具有 myObjectType0) 函 
网 化 ”一 个 对 象 。 
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性 : 
































// overwrites the 
































var myNewObjecti = new myObjectType(); 
var myNewObject2 = new myObjectType(); 
m 接 下 来 看 一 些 实际 的 例子 。 程 序 清单 7.2 首 先 定义 了 一 个 构造 函 












































程序 清单 7.2 ”使 用 构造 函数 创建 对 象 

















<!DOCTYPE html> 


<html> 
<head> 
<title>Object Oriented Programming</title> 
<script> 
function myObjectType(){ 
this.info = 'I am a shiny new object'; 
this.showInfo = function(){ 
alert(this.info) ; 
} 
this.setInfo = function (newInfo) { 
this.info = newInfo; 
} 
} 
var myNewObject1 = new myObjectType(); 
var myNewObject2 = new myObjectType(); 
</script> 
</head> 
<body> 


<input type="button" value="Show Info 1" 
onclick="myNewObject1.showInfo()" /> 


<input type="button" value="Show Info 2" 
™»onclick="myNewObject2.showInfo()" /> 

<input type="button" value="Change info of object2" 
=»onclick="myNewObject2.setInfo('New Information!')" /> 
</body> 
</html> 


然后 生成 对 象 的 两 个 实例 ， 显 然 ， 两 个 实例 是 完全 相同 的 。 点 击 标 
签 为 “Show Info 1”" 和 “Show Info 2” 的 两 个 按钮 ， 可 以 查看 info 属 性 里 保 





























存 的 值 。 


第 三 个 按钮 调用 myNewObject2 对 象 的 setInfo 方 法 ， 把 一 个 新 字符 
传递 给 它 ， 这 样 就 修改 了 myNewObject2 对 象 里 info 忆 性 保存 的 值 ， 再 ; 
点 击 前 两 个 按钮 可 以 观察 属性 值 的 改变 。 当 然 ， 上 述 操作 并 不 会 影响 
myNewObject 的 定义 。 


7.2.6 ”构造 函数 参数 


在 把 对 象 实例 化 时 ， 还 可 以 通过 给 构造 函数 传递 一 个 或 多 个 参数 来 
定制 对 象 。 在 下 面 的 代码 里 ， 构 造 函数 的 定义 包含 了 一 个 参数 
personName， 它 的 值 会 赋予 构造 函数 的 name 属 性 。 之 后 在 实例 化 两 个 
对 象 时 ， 我 们 给 每 个 实例 都 传递 了 一 个 姓名 作为 参数 。 


function Person(personName) { 
this.name = personName; 
this.info = 'I am called ' + this.name; 
this.showInfo = function(){ 
alert(this.info) ; 
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} 


var personi new Person( Adam ' ); 
var person2 = new Person('Eve'); 


提示: 


定义 构造 函数 时 可 以 设置 多 个 参数 : 





function Car(Color, Year, Make, Miles) { 
this.color = Color; 
this.year = Year; 
this.make = Make; 
this.odometerReading = Miles; 
this.setOdometer = function(newMiles) { 
this.odometerReading = newMiles; 


} 

var cari = new Car("blue","1998","Ford", 79500) ; 

var car2 new Car("yellow","2004","Nissan", 56350); 
car1.setOdometer (82450); 





7.3 ”使 用 prototype 扩 展 和 继承 对 象 
使 用 对 象 的 主要 优点 之 一 是 能 够 在 窑 新 的 环境 中 重复 使 用 已 经 编写 
了 的 代码 。JavaScript 提 供 的 机 制 能 够 基于 已 有 的 对 象 来 修改 对 象 ， 使 其 
拥有 新 的 方法 或 属性 ， 甚 至 可 以 创建 完全 凯 新 的 对 象 。 
这 些 技 术 分 别 被 称 为 “扩展 "和 “继承 ”。 
7.3.1 扩展 对 象 
当 一 个 对 象 已 经 被 实例 化 之 后 ， 如 果 想 使 其 具有 新 的 方法 和 属性 ， 


怎么 办 呢 ? 这 时 可 以 使 用 关键 字 prototype， 从 而 迅速 地 添加 属性 和 方 
法 ， 然 后 就 可 以 用 于 对 象 的 全 部 实例 。 
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实践 
使 用 prototype 扩 展 对 象 
我 们 来 扩展 前 面 范例 里 的 对 象 Person， 给 它 添加 一 个 新 方法 sayHello。 
Person.prototype.sayHello = function() { 
alert(this.name + " says hello"); 























在 编辑 软件 里 新 建 一 个 HTML 文 档 ， 输 入 程序 清单 7.3 的 内 容 。 
程序 清单 7.3 ”利用 prototype 添 加 新 方法 



































<!DOCTYPE html> 
<html> 
<head> 
<title>0bject Oriented Programming</title> 
<script> 
function Person(personName){ 
this.name personName; 
this.info = 'This person is called ' + this.name; 
this.showInfo = function(){ 
alert(this.info); 


var personi 
var person2 
Person.prototype. 


sayHello 


new Person( 'Adam'); 
new Person('Eve'); 
function() { 


alert(this.name + " says hello"); 


} 


</script> 
</head> 
<body> 
<input type="button" 
onclick="person1.showInfo()" /> 
<input type="button" value="Show Info on Eve" 
onclick="person2.showInfo()" /> 
<input type="button" value="Say Hello Adam" 
onclick="person1.sayHello()" /> 
<input type="button" value="Say Hello Eve" 
onclick="person2.sayHello()" /> 


</body> 

</html> 

现在 来 看 看 代码 里 都 发 生 了 什 

首先 ， 我 们 定义 了 一 
和 info、 一 个 方法 showInfo。 

接着 创建 了 两 个 对 象 ， 每 个 对 象 在 实例 化 时 给 name 
两 个 对 象 之 后 ， 我 们 使 用 关键 字 prototype 给 Person 对 

在 浏览 器 里 加 载 上 述 代码 ， 单 击 页 面 上 显示 的 





showInfo 方 法 没有 任何 变化 ， 而 且 



































value="Show Info on Adam" 


4 
个 构造 函数 ， 它 有 一 个 参数 personName， 定 义 了 两 个 














个 按钮 ， 








属性 name 


属性 设置 了 不 同 的 值 。 在 创建 了 这 
象 定义 里 添加 了 一 个 方法 sayHello。 


可 以 发 现 最 初 





re SCH) 











新 方法 sayHello 对 








于 两 个 已 有 的 实例 也 能 正常 操作 。 





7.3.2 ”继承 


继承 是 指 从 一 种 对 象 类 





对 象 类 型 的 属性 





型 创建 男 一 利 


os 





和 方法 ， 还 可 以 添加 














对象 类 型 ， 
on 属性 和 方法 。 




















式 ， 我 们 可 以 9 
特定 的 类 型 ， 





JavaScript 模 拟 实现 继承 


ih 














设计 出 “通用 ”的 对 象 类 型 
f 可 以 节省 很 多 工作 。 





新 对 象 类 型 继承 老 











通过 这 种 方 




















型 ， 然 后 不 断 


化 它们 来 得 到 更 























的 方式 也 是 使 用 








关键 字 prototype。 























[| Nobject.prototypeH WAYS INR AEA LE, ATS AT AEF 
已 有 的 构造 函数 里 的 全 部 方法 和 属性 都 添加 给 新 的 对 象 。 


见 在 来 定义 另 一 个 简单 的 对 象 : 

function Pet() { 

this.animal = ""; 

this.name = ""; 

this.setAnimal = function(newAnimal) { 
this.animal = newAnimal; 














CH 
























































} 
this.setName = function(newName) { 
this.name = newName; 


} 























Pet 对 象 具 有 表示 动物 类 型 和 宠物 名 称 的 属性 ， 以 及 设置 这 些 属 性 
的 方法 : 


var myCat = new Pet(); 
myCat.setAnimal = "cat"; 


myCat.setName = "Sylvester"; 


假设 现在 要 为 狗 类 专门 创建 一 个 对 象 ， 但 不 是 从 头 开始 创 建 ， 而 是 
让 Dog 对 象 从 Pet 继承 ， 并 且 添 加 属性 breed 和 方法 setBreed。 


首先 ， 我 们 要 创建 Dog 构 造 函 数 ， 定 义 新 的 属性 和 方法 : 





































































































function Dog() { 
this.breed = ""; 
this.setBreed = function(newBreed) { 
this.breed = newBreed; 











这 样 就 完成 了 新 的 属性 和 方法 。 接 下 来 就 是 从 Pet 继承 属性 和 方 
法 ， 这 需要 使 用 关键 字 prototype。 


Dog.prototype = new Pet(); 


现在 就 不 仅 可 以 访问 Dog 里 的 属性 和 方法 ， 还 可 以 访问 Pet 里 的 属性 
和 方法 : 

































































var myDog = new Dog(); 
myDog.setName("Alan") ; 
myDog.setBreed("Greyhound") ; 
alert(myDog.name + " is a " + myDog.breed); 





扩展 JavaScript 内 置 的 对 象 


关键 字 prototype 还 能 够 扩展 JavaScript 内 置 的 对 象 。 举 例 来 说 ， 我 们 可 以 实现 
String.prototype.backwards 方 法 ， 让 它 返回 字符 串 的 逆序 结果 ， 代 码 如 程序 清单 7.4 所 示 。 


程序 清单 7.4 扩展 String 对 象 
































<!DOCTYPE html> 


<html> 
<head> 
<title>Object Oriented Programming</title> 
<script> 
String.prototype.backwards = function(){ 
var out = ''; 
for(var i = this.length-1; i >= 0; i--){ 
out += this.substr(i, 1); 
} 
return out; 
} 
</script> 
</head> 
<body> 
<script> 
var inString = prompt("Enter your test string:"); 
document .write(inString.backwards()); 
</script> 
</body> 
</html> 












































把 上 述 代码 保存 为 HTML 文 件 ， 在 浏览 器 里 打开 它 。 脚 本 使 用 prompt() 对 话 框 让 用 户 
输入 一 个 字符 串 ， 然 后 在 页 面 上 显示 它 的 逆序 结果 。 


我 们 来 看 看 代码 是 如 何 实现 这 个 功能 的 。 
String.prototype.backwards = function(){ 
var out = ''; 
for(var i = this.length-1; i >= 0; i--){ 
out += this.substr(i, 1); 

















} 


return out; 


FETE OK 





ERJ 


匿名 函数 号 

















有 声明 了 一 个 新 变量 out， 用 于 保存 逆序 后 的 字符 串 。 























然后 开始 一 个 循环 ， 从 输入 字符 串 的 末尾 开始 ， 每 次 前 移 一 个 字符 《请 记 住 JavaScript 





























字符 串 的 索引 从 0 开始 ， 而 不 是 1， 所 以 末尾 的 位 置 是 this.length -1) 。 随 着 循环 从 后 向 前 


遍历 字符 串 ， 每 次 都 向 变量 out 添 加 一 个 字符 。 





当 循 环 到 达 输 入 字符 


所 示 。 











的 起 始 位 置 时 ， 循 环 结束 ， 函 数 返 回 逆序 的 字符 串 ， 如 图 7.4 
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图 7.4 颠倒 字符 串 顺 序 的 方法 

















































































































































































































封装 是 面向 对 象 编程 的 一 种 能 力 ， 表 示 把 数据 和 指令 隐藏 到 对 象 内 
部 。 其 具体 实现 方法 在 不 同 的 语言 里 有 所 区 别 。 对 于 JavaScript 来 说 ， 在 
构造 函数 内 部 声明 的 变量 只 能 在 对 象 内 部 使 用 ， 对 于 外 部 来 说 是 不 可 见 
的 。 构 造 函 数 内 部 声明 的 函数 也 是 这 样 的 。 

如 果 想 从 外 部 访问 这 些 变 量 和 函数 ， 需 要 在 赋值 时 使 用 关键 
this， 这 时 它们 就 成 为 了 对 象 的 属性 和 方法 。 

举例 如 下 : 








function Box(width, length, height){ 
function volume(a, b, c) { 
return a*b*c; 


this.boxVolume = volume(width, length, height); 





} 
var crate = new Box(5,4,3); 
alert("Volume = " + crate.boxVolume); // 工 作 正常 














alert(volume(5,4,3)); // 不 能 正常 工作 ， 函 数 volume() 是 不 可 见 的 


























在 前 例 中 ， 从 构造 函数 外 部 不 能 调用 函数 function volume(a, b, c), 
因为 我 们 并 没有 使 用 关键 字 this 把 eee RT 与 之 不 同 的 

是 ， 属 性 crate.boxVolume 是 可 以 从 构造 函数 外 部 访问 的 。 虽 然 它 使 用 了 
函数 volume() 来 计算 ， 但 这 些 操 作 是 在 构造 函数 内 部 进行 的 。 


如 有 果 没 受 有 利用 关键 字 this 把 变量 和 函数 “注册 "为 属性 和 方法 ， 它 们 
就 不 能 从 函数 外 部 调用 ， 它 们 被 称 为 “私有 的 ”。 

































































































































































7.5 ”使 用 功能 检测 





在 W3C DOM 没 有 发 
代码 进行 各 种 调整 来 
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前 面 第 4 章 








展 到 当前 ; 
匹配 不 同 浏览 器 的 DOM 实 现 。 
更 多 单独 的 程序 是 很 常见 的 ， 而 
在 使 用 哪个 浏览 器 之 后 才 决 定 的 。 


介绍 的 关于 navigator 对 象 的 内 容 来 看 ， 浏 览 器 检测 是 


天 态 时 ， 




















JavaScript 
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体 执行 哪个 版 本 








的 。navigator 对 
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的 浏 eae j 





尺码 可 


与 检测 济 览 器 相 比 ， 
所 需 的 功能 。 

尝试 使 用 对 象 、 
下 面 这 个 范 


U, 


Ly 




















TA, 


Fit teil 
方法 或 属 


例 检测 浏览 









































象 包含 的 信息 可 
果 出 现 了 新 浏览 器 或 是 新 版 本 包含 了 新 的 功能 和 特性 
[HE MS ATH 


| 特定 


WA 
win 


Dl 
能 是 





y= 








发 人 员 不 得 不 对 
此 ， 编 写 两 个 其 
的 程序 ， 是 在 党 斌 
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HZR, 














JE 





我 们 可 以 / 

















Java 





法 。 虽 然 当今 的 新 浏览 器 者 
不 支持 。 


使 / 























jifO 语 名 


支持 这 个 方法 ， 





来 检测 getElementById() 方 法 是 否 可 用 : 
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WA oe 
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Scripti |E 









































是 有些 特别 





























至 是 彻底 错误 


fF 
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的 方式 编写 跨 浏 览 器 代码 。 
更 好 的 做 法 是 让 JavaScript 查 看 浏览 
对 象 、 方 法 或 属 
生 ， 然 后 检测 


B 4 


是 否 支 持 代 码 





， ， 一 般 也 就 是 
的 值 。 
器 是 否 支持 document.getElementById() 方 

早期 的 浏览 器 并 








if(document .getE 


} else { 
// 执行 其 他 操 





作 
} 





ementById){ 
myElement = document.getElementById(id); 








如 果 document. getElementById 个 可 月 
这 个 方法 。 









































他 部 分 ， 避 免 使 
与 之 相关 的 方法 是 使 




















在 : 





 ，if0 条 件 语句 会 





ERTO FE BI 





typeof 操 作 符 检测 某 个 JavaScript 函 数 是 否 存 





| iF (typeof document. getElementById == 


‘function'){ 











// 这 里 可 以 使 用 getElementById( ) 方 法 
} else { 
// 执行 其 他 操作 

































































































































































































































































} 

typeof 可 能 返回 的 值 如 表 7.1 所 示 。 

表 7.1 typeof 的 返回 值 
值 含义 

“number” BEB AES BU 

“string” BR VEE PEF E 

“boolean” 澡 作 数 是 布尔 类 型 

“object” 操作 数 是 个 对 象 

null ee fe BUEnull 

undefined BEAR FE SL 

使 用 这 种 技术 不 仅 可 以 检测 DOM 和 内 置 对 象 、 方 法 和 属性 的 存 
在 ， 还 可 以 检测 脚本 中 创建 的 对 象 、 方 法 和 属性 。 

在 这 个 练习 里 ， 检 测 用 户 所 使 用 的 浏览 器 是 没有 什么 太 大 意义 的 ， 
我 们 只 是 想 知 道 它 是 否 支 持 我 们 要 使 用 的 对 象 、 属 性 或 方法 。 这 种 “ 功 
能 检测 "方法 不 仅 比 “ 浏 览 器 检测 "更 准确 和 简洁 ， 而 且 对 未 来 的 兼容 性 
更 有 利 ， 用 户 使 用 新 浏览 器 或 新 版 本 不 会 导致 代码 操作 的 骨 溃 。 














7.6 ”小结 


ASS AT JavaScript 
的 基本 概念 及 其 如 何 


次 介绍 了 如 何 直接 实例 化 对 象 、 添 加 对 象 和 方法 ;如 何 使 用 构造 
函数 创建 对 象 ， 从 而 便于 实例 化 多 个 对 象 。 























向 对 象 编程 OOP) 技术， 首先 是 OOP 
帮助 我 们 开发 复杂 的 程序 。 








































































































最 后 介绍 了 关键 字 prototype 及 如 何 利 ) 
建 对 象 。 











它 扩展 对 象 或 以 继承 方式 新 


7.7 问答 
i: 是否 应 该 总 是 编写 面向 对 象 的 代码 ? 


答 : 这 是 由 个 人 决定 的 。 些 开 发 人 员 喜 欢 以 对 象 、 方 法 、 属 性 
的 方式 进行 构思 ， 按照 相应 的 原则 进行 编程 。 但 对 于 很 多 主要 编写 
较 小 程序 的 人 员 来 说 ，OOP 提 供 的 抽象 状态 有 些 过 于 强大 和 复杂 了 ， 而 
面向 过 程 编程 就 足够 了 。 


问 : 如 何在 其 他 程序 里 使 用 我 的 对 象 ? 
答 : 对 象 的 构造 函数 是 很 便于 迁移 的 。 如 果 页 面 链接 的 JavaScript 


文件 里 包含 对 象 构 造 函数 ， 我 们 就 可 以 在 自己 的 代码 里 创建 这 些 对 象 ， 
使 用 它们 的 属性 与 方法 。 






















































































































































































































































































7.8 作业 


请 先 回答 问题 ， 再 参考 后 面 的 答案 。 


























7.8.1 测验 
构造 函数 创建 的 对 象 被 称 为 ; 
a. 对象 的 实例 
b. 对 象 的 方法 
c. JAA 
2. 从 已 有 对 象 派生 出 新 对 象 的 方式 被 称 大 
a. 封装 
b. 继承 
c. 实例 化 
3. 直接 实例 化 一 个 对 象 的 方式 是 哪 一 种 ? 






























































a. myObject.create(); 
b. myObject = new Object; 
c. myObject = new Object(); 
7.8.2 ”答案 
1. 选 a。 使 用 构造 函数 创建 的 新 对 象 被 称 为 实例 。 
2， 选 bp。 通 过 继承 的 方法 可 以 从 已 有 对 象 派 生出 新 对 象 。 
3. 选 c。 












































7.9 练习 
编写 Card 对 象 的 构造 函数 ， 添 加 suit 属 性 〈 方 块 、 红 心 、 黑 桃 、 梅 
花 ) 和 face 属 性 (A，1，2，...， 王 ) ， 添 加 方法 来 设置 suit 和 face。 
添加 一 个 shuffle 方 法 来 设置 suit 和 face 属 性 ， 表 示 洗 牌 之 后 的 状态 
GER: 使 用 第 4 章 介 绍 的 Math.random() 方 法 ) 。 
利用 关键 prototypes)” 展 JavaScript 的 Date 对 象 ， 添 
getYesterday()， 返 回 前 一 天 的 名 称 。 










































































加 一 个 方法 



































第 8 章 JSON 简 介 
本 章 主 要 内 容 包 括 : 


JSON 是 什么 

如 何 模 拟 关联 数组 
JSON 与 对 象 

访问 JSON 数 据 
JSON 的 数据 序列 化 
JSON 安 全 性 
































前 一 章 介 绍 了 如 何 使 用 new ObjectO 语 法 直接 实例 化 一 个 对 象 。 本 
章 介 绍 的 "JavaScript 对 象 标签 ”(JSON ) 提供 了 另 一 种 创建 对 象 实例 的 
方法 。 这 种 方法 还 可 以 作为 一 种 通用 数据 交换 语法 。 




































































8.1 JSON 是 什么 


JSON (发 音 是 “Jason”) 是 JavaScript 对 象 的 一 种 简单 紧凑 的 标签 。 
EH Rue 对 象 可 以 方便 地 转换 为 字符 串 来 进行 存储 和 转 
换 《〈 比 如 在 不 同 程序 或 网 络 之 间 ) 。 


OO ee 
尺码 表示 的 ， 因 此 我 们 可 以 利用 JavaScript 的 “自动 解析 功能 
Se 办 释 为 代码 ， 而 不 需 要 其 他 的 解析 程序 


JSON 的 官方 主页 是 http://json.org/ ， 其 中 提供 了 大 量 关 于 JSON 资 源 的 链接 。 

























































































JSON 语 法 

_JSON 数 据 的 表示 方式 是 一 系列 成 对 的 参数 与 值 ， 参 数 与 值 由 冒号 
分 隅 ， 每 对 之 间 以 逗号 分 隔 : 
"parami":"value1", "param2":"value2", "param3":"value3" 


最 终 这 些 序列 用 花 括号 包装 起 来 ， 构 成 表示 数据 的 JSON 对 象 : 






































var jsonObject 


"parami": 
“param2": 
“param3" : 


} 


对 象 jsonObject 的 定义 使 用 
的 JavaScript 代 码 。 





























进行 访问 : 




















使 用 JSON 标 签 编写 的 对 








象 














{ 


“valuel", 
“"value2", 
"value3" 


佳 JavaScript 标 签 的 子 集 ， 它 




















具有 属性 











和 方法 ， 











就 是 标准 


























能 够 利 





j 句 点 标签 








alert(jsonObject. 


param1); // 显 示 '"valuel' 








不 仅仅 是 对 象 ， 














JSON 标 签 表 示 。 





使 用 前 面 提 到 














转换 为 字符 串 ， 
章 稍 后 将 介绍 如 





























YEA Fae FA K 
另外 ， 大 型 XML 文 从 











而 序列 化 的 数据 便于 如 
可 序列 化 JSON。 


数据 交换 语法 ，JSON 的 





wil 


更 好 的 是 ，JSON 是 一 种 以 字符 串 格式 实现 数 
任何 能 ee 
A “FF 





“AE? XY 




















EHRE HEE. 





ANENE Ps BE 
化 ”过 程 可 以 方便 地 把 JSON 对 象 











在 网 络 环境 中 1 























的 解析 过 程 比较 慢 ， 























JSON A 








。 对 于 人 类 和 





weg 








计算 机 都 很 易于 


而 JSON 提 供 








途 有 些 类 似 于 XML， 但 它 更 易于 阅 
4 是 JavaScript 对 象 ， 随 时 












































行 存储 和 传输 。 本 
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可 以 使 


























重要 的 优点 ， 从 而 在 近 





阅读 。 





期 获得 J 





巨大 的 发 


展 动力 。 


























。 概念 很 简单 。JSON 就 是 被 花 括 号 包含 的 一 系列 “参数 ”:“ 值 ”对 。 

。 基 本 上 是 其 义 自明 的 。 

。 能 够 快速 创建 和 解析 。 

© 它 是 JavaScript 的 一 个 子 集 ， 不 需要 特殊 的 解释 程序 或 额外 的 软件 
包 。 








当今 一 些 主流 在 线 服务 ， 包 括 Flickr、Twitter 以 及 Google 和 Yahoo 提 
供 的 一 些 服 务 ， 都 提供 以 JSON 标 签 编码 的 数据 。 






































关于 Flickr 如 何 支持 JSON 的 详细 内 容 请 见 
http:/www.flickr.comy/services/api/response.json.html 。 


8.2 ”访问 JSON 数 所 


为 了 还 原 以 JSON 字 符 串 编 码 的 数据 ， 需 要 把 字符 串 转 换 为 
JavaScript 代 码 ， 这 通常 被 称 为 字符 串 的 “去 序列 化 ”。 









































8.2.1 使 用 eval0 


直到 最 近 ， 才 有 一 些 浏 览 器 能 够 直接 支持 JSON〈 稍 后 会 介绍 如 何 
使 用 浏览 器 对 JSON 直 接 支持 ) 。 但 由 于 JSON 是 JavaScript 的 一 个 子 集 ， 
我 们 可 以 使 用 JavaScript 的 函数 eval0 把 JSON 字 符 串 转换 为 JavaScript 对 
象 。 


eval0 函 数 使 用 JavaScript 解 释 程 序 解析 JSON 文 本 来 生成 JavaScript 对 


























































































































var myObject = eval ('(' + jsonObjectString + ')'); 
然后 就 可 以 在 脚本 里 使 用 这 个 JavaScript 对 象 : 


var user = '{"username" : "philb1234","location" : "Spain","height" : 
=1.80}'; 

var myObject = eval ('(' + user + ')'); 

alert(myObject.username); 
































JavaScript 的 eval0) 函 数 会 计算 或 运行 作为 参数 传递 的 内 容 。 如 果 参 数 是 个 表达 式 ，eval0 会 
计算 它 的 值 ， 比 如 : 





var x = eval(4*3); // x=12 





如 果 参 数 包 含 一 个 或 多 个 JavaScript 语 句 ，eval(0 执 行 这 些 语 句 : 





eval ("a=1;b=2;document.write(atb);"); // 向 页 面 写 入 3 














守 串 必须 像 这 样 包含 在 括号 里 ， 避 免 造 成 含义 不 明确 的 JavaScript 语 法 。 


























8.2.2 ”使 用 浏览 器 对 JSON 直 接 支 持 
最 新 的 浏览 器 都 对 JSON 提 供 直接 支持 ， 从 而 可 以 不 使 用 eval0 函 






























































浏览 器 会 创建 一 个 名 为 JSON 的 JavaScript 对 象 来 管理 JSON 的 编码 和 
解码 。 这 个 对 象 有 两 个 方法 : stringify() 和 parse()。 
直接 支持 JSON 的 浏览 器 包括 : 
Firefox(Mozilla) 3.5+ 
Internet Explorer 8+ 
Google Chrome 


Opera 10+ 
Safari 4+ 



































JSON.parse() 




















JSON.parse() 方 法 用 于 解释 JSON 字 符 串 。 它 接收 一 个 字符 串 作 为 参 
数 ， 解 析 它 ， 创 建 一 个 对 象 ， 并 且 根 据 字 符 串 里 发 现 的 “参数 ”:“ 值 ”对 
设置 对 象 的 参数 : 


var Mary = '{ "height":1.9, "age":36, "eyeColor":"brown" }'; 
var myObject = JSON.parse(Mary) ; 
var out = ""; 





























ud 























for (i in myObject) { 

out += i +" = " + myObject[i] + "\n"; 
} 
alert(out); 


这 段 代 码 的 运行 结果 如 图 8.1 所 示 。 




















图 8.1 ”使 用 JSON.parse() 


8.3 JSON 的 数据 序列 化 


在 数据 存储 和 转换 时 , “序列 化 是 指 把 数据 转换 为 便于 通过 网 络 进 
行 存储 和 传输 的 形式 ， 稍 后 再 恢复 为 原始 的 格式 。 


JSON 选 择 字 符 串 作 为 序列 化 数据 的 格式 。 因 此 ， 为 了 把 JSON 对 象 
进行 序列 化 《比如 为 了 通过 网 络 连接 进行 传输 ) ， 需 字符 串 的 形式 























































































































































































































在 直接 支持 JSON 的 浏览 器 里 ， 我 们 只 需要 简单 地 使 
JSON.stringify() 方 法 。 


























JSON.stringify() 

















利用 JSON.stringify() 方 法 可 以 创建 对 象 的 JSON 编 码 字 符 串 。 
先 创建 一 个 简单 的 对 象 ， 添 加 一 些 属性 : 


var Dan = new Object(); 
Dan.height = 1.85; 
Dan.age = 41; 
Dan.eyeColor = "blue"; 


然后 使 用 JSON.stringify( 方 法 序列 化 这 个 对 象 : 
alert( JSON.stringify("Dan") ) 
序列 化 的 对 象 如 图 8.2 所 示 。 



























































图 8.2 ”使 用 JSON.stringify() 





实践 
解析 JSON 字 符 串 


使 用 编辑 软件 创建 一 个 HTML 文 件 ， 输 入 程序 清单 8.1 的 代码 。 


程序 清单 8.1 解析 JSON 字 符 


B 








<!DOCTYPE html> 
<html> 
<head> 
<title>Parsing JSON</title> 
<script> 
function jsonParse() { 
var inString = prompt("Enter JSON object"); 
var out = ""; 
myObject = JSON.parse(inString) ; 
for (i in myObject) { 
out += "Property: "+ i+ "= " + myObject[i] + '\n'; 
} 
alert(out); 
} 
</script> 
</head> 
<body onload="jsonParse() "> 
</body> 
</html> 


当 页 面 加 载 完成 之 后 ， 页 面 <body> 元 素 附 加 的 window 对 象 的 onLoad 
jsonParse() 函 数 。 


函数 里 第 一 行 代码 是 请 用 户 输入 对 应 于 JSON 对 象 的 字符 串 : 
var inString = prompt("Enter JSON object"); 
这 时 要 仔细 地 输入 内 容 ， 要 特别 记得 用 引号 包含 字符 串 ， 如 图 8.3 所 示 。 





lint 





和 件 处 理 器 会 调 



















































































| + Javascript 


ey Enter JSON object 


| {"name":!jo","age":23} ji 


Osores 

















8.3 输入 JSON 字 符 串 

















接着 脚本 声明 一 个 空 字 符 串 变量 out， 用 于 保存 输出 消息 : 


var out = °°; 


然后 使 用 JSON.parse0 方 法 ， 基 于 输入 的 字符 串 创建 一 个 对 象 : 
myObject = JSON.parse(inString) ; 
现在 就 可 以 通过 遍历 对 象 的 方法 来 建立 输出 消息 : 


for (i in myObject) { 
out += "Property: "+ i +" = " + myObject[i] + '\n'; 















































} 
最 后 ， 显 示 结 果 : 


alert (out); 


脚本 的 输出 结果 如 图 8.4 所 示 。 























图 8.4 解析 JSON 字 符 串 得 到 的 对 象 
重新 加 载 页 面 ， 输 入 不 同 数量 的 “参数 ”: “ 值 ” 对 来 观察 运行 结果 。 





8.4 JSON 数据 类 型 
“参数 ":“ 值 ”对 里 的 参数 部 分 必须 遵循 一 些 简单 的 语法 规则 : 


。 不 能 是 JavaScript 保 留 的 关键 字 。 
。 不 能 以 数字 开头 。 
。 除 了 下 划 线 和 美元 符号 外 ， 不 能 包含 任何 特殊 字符 。 


JSON 对 象 的 值 可 以 是 如 下 一 些 数据 类 型 
数值 


字符 
布尔 值 
数组 
WR 

null (F) 






































it 




















| JavaScript 有 一 些 数据 类 型 不 属于 JSON 标 准 ， 包 括 Date、Error、Math 和 Function。 这 些 数 
【〖 据 必须 用 其 他 数据 格式 来 表示 ， 使 用 遵循 相同 编码 和 解码 规则 的 其 他 编 解码 程序 进行 处 理 。 



































8.5 ”模拟 关联 数组 


第 5 章 中 介绍 了 JavaScript 的 数组 对 象 以 及 它 的 多 种 属性 和 方法 ， 从 
而 我 们 知道 JavaScript 数 组 里 的 元 素 具 有 唯一 的 数值 索引 : 


var myArray = []; 
myArray[0] = ‘Monday' ; 
myArray[1] = ‘Tuesday'; 
myArray[2] = ‘Wednesday ; 


在 其 他 很 多 编程 语言 里 ， 我 们 可 以 使 用 文本 形式 的 索引 ， 从 而 让 代 
码 的 描述 性 更 强 : 


myArray["startDay"] = "Monday"; 
不 幸 的 是 ，JavaScript 并 不 直接 支持 这 种 所 谓 的 “关联 "数组 。 


然而 利用 对 象 可 以 方便 地 模拟 这 种 行为 ， 比 如 利用 JSON 标 签 可 以 
让 上 述 代码 更 易于 阅读 和 理解 : 


var conference = { "startDay" : "Monday", 
"nextDay" : "Tuesday", 
"endDay" : "Wednesday" 








































































































































































































现在 就 可 以 像 使 用 关联 数组 一 样 访问 对 象 的 属性 : 




















alert(conference["startDay"]);  // 输 出 “Monday” 








在 JavaScript 里 ，object["property"] 和 object.property 是 相同 的 语法 。 





虽然 看 上 去 挺 像 ， 但 这 并 不 是 真正 的 关联 数组 。 如 果 对 它 进行 遍历 ， 会 得 到 对 象 的 三 个 
属性 和 它 包 含 的 全 部 方法 。 











8.6 ”使 用 JSON 创 建 对 象 
第 5 章 介绍 过 表示 数组 的 一 种 简便 方式 是 使 用 方 括号 ; 
var categories = ["news", "sport", "films", "music", "“comedy"]; 


JSON 能 够 以 类 似 的 方式 定义 JavaScript 对 象 。 





























提示 : 
虽然 JSON 是 为 了 描述 JavaScript 对 象 而 开发 的 ， 但 它 是 独立 于 任何 编程 语言 和 平台 的 。 很 
多 编程 语言 都 包含 JSON 库 和 工具 ， 比 如 Java、PHP、C 等 。 
8.6.1 属性 
如 前 面 所 介绍 的 ， 在 用 JSON 标 签 表示 对 象 时 ， 我 们 把 对 象 包含 在 
人 以 “参数 ”:“ 值 ”对 的 方式 列 出 对 象 的 
var user = { 
"username" : "philb1234", 
"location" : "Spain", 


"height" : 1.80 














































































































之 后 就 能 以 常见 的 形式 访问 对 象 的 属性 : 











var name = user.username;  // 变 量 name 包 含 的 值 是 "philb1234" 











JavaScript 语 句 : 





var myObject = new Object(); 








ae 会 创建 对 象 的 -个 “ 空 ?实例 ， 没 有 任何 的 方法 和 属性 。 很 自然 地 ， 相 应 的 JSON 标 签 表示 


方法 是 : 





var myObject = {}; 








8.6.2 方法 


























同样 使 用 上 面 的 形式 ， 利 用 匿名 函数 就 可 以 给 对 象 添加 方法 。 
var user = { 
"username" : "philbi234", 
"location" : "Spain", 
"height" : 1.80, 
"setName" :function(newName) { 
this .username=newName ; 


























然后 就 可 以 调用 这 个 setName 方 法 了 : 


var newname = prompt("Enter a new username:") ; 
user. setName (newname) ; 


























在 JavaScript 环 境 中 使 用 这 种 方式 添加 方法 是 可 以 的 ， 但 当 JSON 作 为 通用 数据 交换 格式 























时 ， 不 能 这 样 使 用 。 在 直接 支持 JSON 解 析 的 浏览 器 里 ， 以 这 种 方式 声明 的 函数 会 解析 错误 ， 
e be 。 当 然 ， 如 果实 例 化 的 脚本 只 是 在 自己 的 脚本 里 使 用 ， 还 是 可 以 这 样 
















































































相关 内 容 请 参考 本 章 后 面 关于 JSON 安 全 性 的 介绍 。 
8.6.3 ”数组 
属性 值 可 以 是 数组 : 
var bookListObject = { 
"booklist": ["Foundation", 
"Dune", 
I Eon H ; 


"2001 A Space Odyssey", 
"Stranger In A Strange Land" ] 



































在 这 段 代码 里 ， 对 象 有 一 个 booklist 属 性 ， 它 的 值 是 个 数组 。 利 用 
就 可 以 访问 数组 里 的 元 素 〈 请 记 住 ， 数组 的 索引 从 0 开 


















































var book = bookListObject.booklist[2]; ”// 变 量 book 的 值 是 "Eon" 





























上 一 行 代码 把 数组 booklist 的 第 三 个 元 素 赋予 变量 book， 而 这 个 数 
组 是 bookListObject 对 象 的 一 个 属性 。 


8.6.4 对象 
JSON 对 象 还 可 以 包含 其 他 对 象 。 通 过 把 数组 元 素 本 身 设置 为 JSON 
编码 的 对 象 ， 我 们 就 可 以 利用 句点 标签 访问 它们 。 


在 下 面 的 范例 代码 里 ， 属 性 booklist 的 值 是 JSON 对 象 组 成 的 数组 
每 个 JSON 对 象 有 两 个 “参数 ”: “ 值 ? 对 ， 分 别 用 于 保存 图 书 的 标题 和 作者 
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信息 。 























在 像 前 例 所 示 那 样 获 得 图 书 列表 之 后 ， 能 很 方便 地 访问 title 和 author 




















var booklistObject = { 
"booklist": [{"title":"Foundation", "author":"Isaac Asimov"}, 
{"title":"Dune", "author":"Frank Herbert"}, 
{"title":"Eon", "author":"Greg Bear"}, 
{"title":"2001 A Space Odyssey", “author":"Arthur C. Clarke"}, 


{"title": "Stranger In A Strange Land", "“author":"Robert A. Heinle 
in"}] 


} 
// 显 示 第 三 本 书 的 作者 
alert(bookListObject.booklist[2].author); // 显 示 "Greg Bear" 














处 理 多 层次 JSON 对 象 

















利用 前 面 的 JSON 对 象 bookListObject， 我 们 来 构造 一 个 消息 ， 以 清晰 的 方式 列 出 图 书 
的 标题 和 作者 。 先 创建 一 个 HTML 文 件 ， 输 入 程序 清单 8.2 所 示 的 代码 。 其 中 的 JSON 对 象 
与 前 例 是 相同 的 ， 但 这 一 次 会 利用 一 个 循环 访问 图 书 列表 ， 获 得 图 书 名 称 和 作者 来 构成 输 
出 消息 ， 并 且 把 消息 显示 给 用 户 。 




















































































































程序 清单 8.2 ”处 理 多 层次 JSON 对 象 








<!DOCTYPE html> 


<html> 

<head> 
<title>Understanding JSON</title> 
<script> 
var booklistObject = { 

"booklist": [{"title":"Foundation", "“author":"Isaac Asimov"}, 
{"title":"Dune", "author":"Frank Herbert"}, 
{"title":"Eon", "“author":"Greg Bear"}, 

{"title":"2001 A Space Odyssey", "author": "Arthur C. 
Clarke"}, 


{"title":"Stranger In A Strange Land", “author":"Robert A. 
»Heinlein"}] 


} 


// a variable to hold our user message 
var out = ""; 


// get the array 
var books = booklistObject.booklist; 


//Loop through array, getting the books one by one 
for(var i =0; i<books.length;it+) { 
var booknumber = it+1; 
out += "Book " + booknumber + 
"is: '" + books[i].title + 
"' by " + books[i].author + 
nr 
} 
</script> 
</head> 
<body onload="alert (out) "> 
</body> 
</html> 


在 这 段 代码 里 ， 在 设计 了 JSON 对 象 之 后 ， 我 们 声明 了 一 个 变量 并 赋予 它 空 字符 是 
于 保存 输出 的 消息 : 


var out = °°; 


接着 获取 图 书 的 列表 ， 把 这 个 数组 保存 到 新 变量 books 中 ， 从 而 避免 反复 输入 很 长 的 
名 称 : 





过 









































var books = booklistString.booklist; 


然后 就 只 需要 遍历 books 数 组 ， 读 取 每 个 元 素 的 titte 和 author 属 性 ， 组 成 一 个 字符 串 ， 
添加 到 输出 信息 。 


for(var i =0; i<books.length;i++) { 
var booknumber = i+1; // array keys start at zero! 














out += "Book " + booknumber + 
"is: '" + books[i].title + 
"' by " + books[i].author + 
"\n"; 


} 











最 后 ， 把 消息 显示 给 用 户 : 


alert(out): 


脚本 运行 的 结果 如 图 8.5 所 示 。 


























javascript Alert 


Book 1 is: 'Foundation' by Isaac Asimov 

Book 2 is: 'Dune' by Frank Herbert 

Book 3 is: 'Eon' by Greg Bear 

Book 4 is: '2001 A Space Odyssey’ by Arthur C. Clarke 

Book 5 is: ‘Stranger In A Strange Land! by Robert A. Heinlein 


























图 8.5 ”给 用 户 显 示 的 图 书信 息 



































8.7 JSON 安 全 性 


使 用 JavaScript 的 eval0 函 数 能 够 执行 任何 JavaScript 命 令 ， 这 可 能 会 
导致 潜在 的 安全 问题 ， 特 别 是 处 理 来 源 不 明 的 JSON 数 据 时 。 



































更 安全 的 办 法 是 使 用 内 置 JSON 解 析 器 的 浏览 器 把 JSON 字 符 串 转换 
为 JavaScript 对 象 ， 它 只 识别 JSON 文 本 ， 而 且 不 会 执行 脚本 命令 。 同 
时 ， 内 置 的 JSON 解 析 器 的 速度 也 比 eval0 快 一 些 。 



































































































































较 新 的 浏览 器 都 内 置 了 JSON 解 析 器 ，ECMAScript (JavaScript) 标 
准 也 明确 了 它 的 规范 。 














8.8 小 结 


本 章 介绍 了 JSON 标 签 ， 它 是 一 种 轻 量 级 的 数据 交换 语法 ， 也 可 以 
来 创建 JavaScript 对 象 的 实例 。 


还 介绍 了 如 何 利用 现代 浏览 器 内 置 的 JSON 解 析 器 把 对 象 序列 化 为 
JSON 字 符 串 ， 以 及 如 何 把 JSON 字 符 串 解析 为 JavaScript 对 象 。 












































8.9 ”问答 


问 : 哪里 有 官方 的 JSON 规 范文 档 ? 






































Z: RFC 4627 规 范 了 JSON 语 法 ， 可 以 从 网 站 
http://www.ietf.org/rfc/rfc4627 获得 。 另 外 ， 在 JSON 的 官方 网 站 
http://json.org/ 也 有 丰富 的 内 容 。 

问 : 如 何 判断 所 使 用 的 浏览 器 是 否 直接 支持 JSON? 


答 : 利用 typeof 操 作 符 可 以 判断 是 否 存在 JSON 对 象 : 






















































































if (typeof JSON == ‘object') { 
// 直 接 支持 JSON 
} else 


{ 
// 用 其 他 方式 来 解决 ， 比 如 eval() 




















} 



































在 使 用 这 段 代码 时 ， 要 确保 脚本 里 没有 自己 定义 的 名 为 JSON 的 对 
象 ， 否 则 就 可 能 得 到 期 望 之 外 的 结果 。 






































8.10 作业 


请 先 回答 问题 ， 


8.10.1 测验 











再 查 














1. JSON 是 什么 的 缩写 ? 


查看 后 面 的 答案 。 


a. JavaScript Object Notation 


b. Java String Object Notation 


c. JavaScript Serial Object Notation 


2. JSON 能 实现 以 下 什么 功能 ? 
a. 创建 构造 函数 
b. 解析 XML 数据 
c. 直接 实例 化 对 象 

























































































3. 使 用 哪个 符号 包含 JSON 对 象 9 
a. 花 括号 { } 
b. JSI] 
c. 圆 括号 () 
8.10.2 答案 
1. ita. 
2. ic. 


系列 “参数 ” 


:“ 值 ”对 ? 


8.11 


在 浏 





练习 














览 器 里 加 载 程序 清单 8.1 的 代码 ， 尝 试 输入 一 些 以 数组 作为 参 























数值 的 JSON 字 符 串 ， 比 如 : 





{"days":{"Mon","Tue", "Wed"}} 








程序 

















fE) 





























属性 


。 利 














jstringify(0 方 法 把 对 象 转换 为 JSON 


的 运行 情况 如 何 ? 与 期 望 的 一 致 吗 ? 
jnew Object0 形 式 实例 化 一 个 对 象 ， 添 加 一 些 以 数组 作为 值 的 


Reh 





字符 


E, MANA BIAS 








FO MME 


本 章 主要 内 容 包 所 


。 JavaScript 内 置 事件 处 理 器 的 进一步 介绍 
。 添加 和 删除 自己 的 事件 处 理 器 


A FLUE 


到 





































































































本 章 介绍 什么 是 事件 处 理 和 如 何 编写 跨 浏 览 器 的 事件 处 理 程序 。 














9.1 理解 事件 处 理 器 


的 。 


fii HEM) 





对 于 致力 于 给 页 
在 用 
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接 。 


应 ， 我 们 就 可 以 实现 特 
时 执行 。 


打响 
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Wio Ay, JavaScripti 





mI ne A ME 














户 进行 一 些 操作 时 《导致 一 些 
种 机 制 来 探测 用 


需要 一 














还 有 些 事件 不 是 








面 加 载 完 成 时 触发 的 。 


JavaScript i tril 
T, BRI 


Ey A 览 器 需 








然而 ， 通 过 编写 


























的 脚本 语言 A 来 说 ， 


户 操作 触发 的 ， 上 


I 很 多 事件 的 发 生 。 
执行 一 些 默 认 的 操作 ， 








事件 处 理 器 来 捕获 
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而 在 特定 导 











定 的 功能 。 
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9.1.1 事件 范例 














本 书 前 面 的 内 容 














被 触发 时 ， 为 了 能 够 执行 
从 特定 HTML 元 素 的 特定 事件 处 理 程序 里 调 





里 创建 过 多 种 寻 








oa 


BE 





功能 是 必 








些 事件 被 触发 ) ， 








xy 
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any 





:事件 ， 














它 。 





有 件 处 理 器 来 响应 事件 ， 











户 行为， 从 了 


上 如 window.onload 事 件 


kt 转 到 被 点 


并 且 做 出 村 
里 事件 的 代码 ， 
我们 编写 的 代码 ， 


页 
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面 应 该 对 事件 























常 这 些 事件 的 发 生 是 不 被 注 





进行 相 





























比如 cl 


应 的 响 
在 事件 被 触发 


TE 
需要 





ick、 





出 了 常见 的 寻 





mouseover、Imouseout 和 body 元 素 的 load 事 件 。 表 9.1 列 蝇 
处 理 器 。 


表 9.1 HN 





EAS BE a 


FF 





事件 处 理 器 


响应 的 事件 











onBlur 


户 离开 字段 

















onChange 





户 修改 了 值 ， 正 要 离开 























onClick 





户 点 击 






























































































































































onDbIClick 户 双击 鼠标 

onFocus 户 进入 字段 〈 点 击 它 或 跳 转 到 它 ) 
onKeydown 在 元 素 激活 时 ， 一 个 按键 被 按 下 
onKeyup 在 元 素 激活 时 ， 一 个 按键 被 释放 
onKeypress 在 元 素 激活 时 ， 一 个 按键 被 按 下 ， 然 后 被 释放 
onLoad 对 象 已 经 加 载 

onMousedown 鼠标 按钮 在 一 个 对 象 上 被 按 下 
onMouseup 鼠标 按钮 被 释放 

onMouseover 鼠标 移动 到 对 象 上 

onMousemove 鼠标 在 对 象 上 方 移动 

onMouseout 鼠标 离开 对 象 

onReset 日 户 重 置 表单 

onSelect 日 户 选择 了 对 象 的 一 些 内 容 
onSubmit 有 户 提 交 表单 

onUnload 户 关闭 浏览 器 窗 


























9.1.2 ”添加 事件 处 理 器 





























本 书 前 面 的 内 容 里 介绍 过 如 何 添 加 一 个 内 联 事件 处 理 器 : 
<input type="button" onclick="myFunction()" /> 





























这 种 方式 在 早期 JavaScript 里 广泛 使 












































但 具有 一 些 严重 缺陷 。 最 大 的 问题 在 于 这 样 会 


























混合 在 一 起 ， 而 事实 证 明 ， 它 们 之 间 分 离 得 越 清楚 越 好 。 











是 好 事情 。 

















添加 事件 处 理 器 还 有 更 简洁 和 灵活 的 方式 。 假 设 有 个 函 
buttonAlert(), 我 们 想 在 HITML 页面 上 一 个 按钮 的 onClick 事 


























调用 它 。 

















function buttonAlert() { 
alert ("You clicked the button"); 





。 它 很 实用 ， 也 很 容易 记 住 ， 
巴 JavaScript 代 码 与 HTML 





第 13 章 会 介绍 哪些 是 良好 的 编码 习惯 ， 说 明 为 什么 把 HTML 和 JavaScript 代 码 分 离开 通常 


J 
件 处 理 器 里 

































































为 了 让 事件 处 理 器 调用 它 ， 我 们 并 没有 使 用 前 面 所 示 的 








<input type="button" id="myButton" 


而 是 在 JavaScript 代 码 旦 
钮 元 素 ， 再 把 函数 赋予 它 的 onclick 方 法 ; 























It 
































document .getElementById("myButton").onclick = 





在 注册 事件 处 理 器 时 ， 函 数 名 后 面 不 能 有 括号 。 























式 : 





SS 


onclick="buttonAlert()" /> 


如 果 写 成 这 样 : 


利用 document.getElementById0) 方 法 访问 按 


buttonAlert; 








document. getElementById("myButton").onclick = myFunction(); 








代码 就 先 执行 myEFunction0) 函 数 ， 然 后 把 它 的 返 











可 值 赋予 元 素 的 onClick 导 








大 件 处 理 器 。 




















这 种 方式 让 代码 具有 了 很 大 的 灵活 性 ， 比 如 可 以 根据 条 件 停止 或 启 
用 事件 处 理 器 ， 或 是 把 它 应 其 他 页 面 元 素 ， 或 是 修改 它 的 操作 。 而 
在 以 内 联 方 式 设置 事件 处 理 器 时 ， 实现 上 述 操作 是 很 麻烦 的 。 





























































































































另外 ， 如 果 函 数 buttonAlert(0) 不 需要 在 其 他 部 分 使 用 ， 我 们 还 可 以 
利用 匿名 函数 的 方式 来 添加 事件 处 理 器 ; 


document .getElementById("myButton").onclick = function() { 
alert ("You clicked the button"); 









































} 











当然 ， 传 递 给 事件 处 理 器 的 函数 可 以 包含 多 条 语句 : 


document .getElementById("myButton").onclick = function() { 
alert ("You clicked the button"); 
counter++; 


document.getElementById("someId").innerHTML = "foo"; 


























9.1.3 ”删除 事件 处 理 器 


要 删除 事件 处 理 器 ， 只 需 简单 地 给 它 赋值 null: 
































document .getElementById("myButton").onclick = null; 
null 值 会 覆盖 以 前 赋予 的 任何 内 容 ， 从 而 有 效 地 删除 事件 处 理 器 。 




















9.2 默认 操作 





一 般 情况 下 ， We 
执行 的 。 









































事件 处 理 器 是 在 元 素 默认 操作 之 前 
举例 来 说 ， 给 一 个 链接 的 onClick 事 件 处 理 器 赋予 一 个 函数 : 
<a href="target.html"id="myLink">Link text</a> 
<script> 





document. getElementById("myLink") .onclick=function(){ 
// 要 执行 的 代码 

} 

</script> 

















当 用 户 点 击 这 个 链接 于 
target.html。 HH 


时 ， 其 默认 操作 是 打开 链接 指向 的 
由 于 onClick 事 件 处 理 器 在 默认 操作 之 前 执行 ， 我 们 可 以 
元 素 的 默认 操作 修改 为 其 他 动作 。 
假设 我 们 想 改变 链接 的 目标 
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<a href="target.html" id="myLink">Link text</a> 
<script> 


document .getElementById("myLink") .onclick 
this. href 




























































































= function() { 
"http: //www.google.com"; 
} 
</script> 
于 onClick 事 件 处 理 器 的 代码 首先 执行 ， 当 链接 跳 转 时 ， 其 href 属 
性 已 经 被 修改 为 www.google.com 了 。 
禁止 默认 操作 
利用 事件 处 理 器 优先 执行 的 特点 ， 我 们 可 以 禁止 HTML 元 素 的 默认 
操 
如 果 事 件 处 理 器 给 HTML 元 素 ; 
作 就 不 会 执行 。 








一 个 布尔 值 false， 元 素 的 默认 操 


<a href="target.html" id="myLink">Link text</a> 
<script> 
document .getElementById("myLink").onclick = function() { 
this.href = "http://www.google.com"; 
return false; 


} 
</script> 


再 稍微 调整 一 个 代码 ， 我 们 还 可 以 让 事件 处 理 器 自己 决定 是 否 人 允许 
默认 行为 发 生 : 


<a href="target.html" id="myLink">Link text</a> 
<script> 
document .getElementById("myLink").onclick = function() { 
this.href = "http://www.google.com"; 
return confirm("I'm going to send you to Google instead. OK?"); 
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} 


</script> 


在 上 面 的 代码 里 ， 函 数 的 返回 值 取 决 于 用 户 对 confimmO 对 话 框 的 响 
应 。 如 果 用 户 点 击 了 对 话 框 里 的 “确定 按钮 ， 函 数 会 返回 布尔 值 tue， 
链接 会 跳 转 到 新 的 目标 URL。 如 果 用 户 点 击 了 “取消 ?按钮 ， 函 数 就 会 返 
这 时 链接 的 默认 操作 就 不 会 进行 ， 其 现象 就 是 点 击 链接 没有 效 


















































































































































实践 
禁止 onSubmit 事 件 的 默认 操作 


每 个 HTML 表 单元 素 都 有 一 个 onSubmit 事 件 处 理 器 ， 在 表单 被 提交 时 触发 。 我 们 可 以 
给 这 个 事件 处 理 器 赋予 一 个 函数 ， 让 函数 返回 布尔 值 false， 从 而 阻止 表单 元 素 的 提交 操 


























创建 一 个 HTML 文 件 ， 输 入 程序 清单 9.1 的 代码 。 
程序 清单 9.1 取消 onSubmit 事 件 的 默认 操作 














<!DOCTYPE html> 


<html> 
<head> 
<title>Canceling Default Behavior</title> 
<script> 
function checkform() { 
document. getElementById("form1").onsubmit = function() { 
var allowSubmit = true; 
if (document.getElementById("user").value == "") { 
alert("Name field cannot be blank"); 
allowSubmit = false; 
} 
if(allowSubmit) alert("Data OK - submitting form"); 
return allowSubmit; 
} 
} 
window.onload = checkform; 
</script> 
</head> 
<body> 
<form id="form1"> 
Name: <input type="text" value="""name="username" id="user" /> 
[Required field]<br/> 
Phone: <input type="text" value="" name="telephone" id="phone" /> 


[Optional field]<br/> 
<input type="submit" /> 
</form> 
</body> 
</html> 


在 HTML 页 面 的 <head> 区 域 定义 了 函数 checkform()。 当 页 面 完 成 加 载 时 ， 


window.onload 事 件 处 理 器 会 调用 它 。 前 面 的 内 容 里 也 介绍 过 这 个 事件 处 理 器 ， 但 这 次 是 使 
JavaScript 添 加 事件 处 理 器 ， 而 不 是 在 页 面 的 <body> 标 签 里 添加 。 


window.onload = checkform; 


现在 来 看 看 函数 checkform()。 函 数 定义 中 首先 利用 getElementById() 获 得 了 页 面 的 
<form> 元 素 ， 然 后 给 表单 元 素 的 onSubmit 事 件 处 理 器 添加 了 一 个 匿名 函数 。 当 表单 被 提交 
时 ， 就 会 执行 这 个 函数 。 我 们 希望 函数 在 允许 表单 提交 时 返回 true 值 ， 否 则 返回 false 值 来 
阻止 提交 。 


首先 定义 用 于 保存 返 
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值 的 变量 ， 其 默认 值 是 true: 

















var allowSubmit = true; 


接着 是 实际 的 测试 条 件 : 
if(document.getElementById("user").value == "") { 
alert("Name field cannot be blank"); 
allowSubmit = false; 


} 


显然 ， 把 输入 元 素 的 id 作为 参数 传递 给 getElementById() 方 法 就 可 以 访问 它们 。 在 本 例 
中 ， 我 们 关心 的 是 用 户 是 否 在 输入 字段 里 输入 了 内 容 。 这 个 内 容 是 保存 在 元 素 的 value 属 性 
里 的 。ifO 语 名 检查 它 是 否 为 室 ， 如 果 是 ， 就 向 用 户 输出 解释 信息 ， 并 且 把 变量 
allowSubmit 的 值 从 true 修 改 为 false。 


| gym 


本 例 中 只 检查 了 用 户 在 username 字 段 里 是 否 输 入 了 内 容 ， 而 在 实际 的 表单 操作 中 ， 需 要 检查 更 多 的 条 件 ， 
| 条 件 也 会 更 严格 。 


这 种 检测 通常 称 为 “表单 验证 *"， 是 JavaScript 的 常见 应 


最 后 ， 函 数 返 回 allowSubmit 的 值 。 由 于 本 例 中 的 表单 没有 什么 实际 作用 ， 所 以 当 函 数 
返回 的 值 是 true 时 ， 脚 本 会 显示 一 条 “成 功 ”信息 : 


if(allowSubmit) alert("Data OK - submitting form") ; 
return allowSubmit; 


在 浏览 器 里 加 载 这 个 页 面 ， 尝 试 在 Name 字 段 里 输入 内 容 或 空白 时 提交 表单 。 当 Name 
字段 为 空 时 提交 表单 ， 脚 本 就 会 显示 如 图 9.1 所 示 的 结果 ， 并 且 阻 止 表 单 提交 。 
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Name: | [Required field] 
Phone: [912-555-0141 [Optional field] 











9.3 event% 


检测 到 事件 发 生 是 很 有 趣 而 且 实用 的 ， 
的 一 些 详情 ， 比 姑 键盘 上 哪个 键 被 按 下 了 ， 





























有 时 我 们 还 需要 了 解 事件 
触发 时 鼠标 在 什么 位 
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为 了 了 解 这 些 信息 ， 需 要 使 用 event 对 象 。 它 是 由 浏览 器 自动 生成 
的 ， 包 含 的 属性 涉及 被 触发 事件 的 方方面面 。 


浏览 器 容 性 问题 对 于 如 何 处 理事 件 的 影响 超过 了 对 于 JavaScript 其 
他 部 分 的 影响 。 为 了 掌握 如 何 编 写 优秀 的 跨 浏览 器 代码 ， 我 们 既 要 理解 
W3C 容 浏 览 器 采取 的 方式 ， 又 要 理解 微软 正 类 型 浏览 器 的 方式 。 































































































9.3.1 W3C 方 式 

















在 Firefox 等 更 严格 遵循 W3C 规 范 的 浏览 器 里 ， 当 事件 被 触发 时 ， 

自动 把 event 对 象 作为 参数 传递 给 事件 处 理 器 。 TR 问 event 对 象 的 = 

我 们 需要 给 合 它 设置 个 名 称 ， 也 就 是 给 事件 处理 器 声明 一 个 变量 ， 
H: 


myElement = document .getElementById("someID"); 
myElement.onclick = function (e) { ... } 
在 这 个 范例 里 ， 访 问 变量 e 的 属性 就 可 以 访问 event 对 象 的 属性 : 
myElement.onclick = function (e) { alert(e.type); } 
(0 

使 用 “e” 作 为 名 称 是 个 惯例 ， 但 不 是 必须 的 。 在 这 里 可 以 使 用 任何 有 效 的 对 象 名 称 。 


9.3.2 ”微软 方式 


微软 采用 的 方式 是 给 window 对 象 设计 了 一 个 event 属 性 。 
一 次 被 触发 事件 的 细节 : 
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myElement = document.getElementById("someID") ; 
myElement.onclick = function (e) { alert(window.event.type); } 


9.4 跨 浏 览 器 的 事件 处 理 器 


os 





件 。 


技巧 是 在 事件 
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处 理 函 数 里 检测 event 对 象 的 存在 性 。 如 果 有 event 对 











象 ， 就 说 明 是 W3C 


类 型 的 ， 这 时 就 需 

















需要 获得 window.event 属 


dm 




















容 的 浏览 器 ;如 果 不 存在 ， 浏 览 器 就 很 可 能 是 微软 
性 ， 











把 它 赋予 对 象 e: 





myElement.onclick=function(e){ 
if (!e) var e=window.event; 


// 这 样 e 就 代表 的 任何 浏览 器 的 event 对 象 

















这 里 处 理 event 事 从 











+ 及 其 有 效 方法 的 手段 属于 浏览 器 功能 检测 ， 在 第 7 章 中 介绍 过 


这 样 就 解决 跨 浏览 器 的 问题 了 ? 不 ， 还 不 是 。 




















虽然 不 管 使 i; 








和 微软 规范 对 于 event 对 象 包含 什么 属性 的 标准 是 不 一 样 的 。 表 9.2 列 出 
了 W3C 浏 览 器 和 微软 浏览 器 都 具有 的 属性 。 








的 是 什么 浏览 器 ， 我 们 都 获得 了 event 对 象 ， 但 W3C 










































































表 9.2 通用 事件 属性 











type 


事件 类 型 








altKey 


Alt 键 是 否 按 下 (7 


布尔 


(E) 





clientX, clientY 




















相对 于 浏览 器 窗 








iy 


有 件 坐 标 























ctrlKey Ctnl 键 是 否 按 下 (布尔 值 ) 
keyCode 键盘 字符 编码 

screenX, screenY 相对 于 屏幕 的 事件 坐标 
shiftKey Shift 键 是 否 按 下 《〈 布 尔 值 ) 




















坏 消息 是 ， 还 有 很 多 属性 






































在 两 类 浏览 器 里 是 不 同 的 ， 表 9.3 列 日 





了 
























































其 中 一 些 。 
表 9.3 ”一 些 不 同 的 事件 属性 
微软 W3C 描述 

fromElement relatedTarget mouseover 或 mouseout 事 件 从 哪个 对 象 来 
toElement relatedTarget mouseover 或 mouseout 事 件 到 哪个 对 象 去 
offsetX, offsetY |ma 事件 在 元 素 里 的 水 平和 垂直 坐标 

n/a pageX, pageY “| 事件 在 文档 里 的 水 平和 垂直 坐标 

X: y layerX, layerY “| 事件 在 <body> 元 素 里 的 水 平和 垂直 坐标 
srcElement target 接收 事件 的 对 象 








为 了 实现 跨 浏 览 器 的 代码 ， 我 们 需要 在 脚本 中 检测 event 对 象 是 否 











我们 需要 的 方法 和 属性 ， 比 如 : 









































if (!e) var e = window.event; 
var element = (e.target) ? e.target : e.srcElement; 
这 个 范例 检测 了 是 否 存在 e.target， 如 果 存 在 ， 用 户 使 用 的 浏览 器 就 


是 W3C 类 型 的 ， 变 量 element 就 被 赋予 e.target 的 值 。 如 果 e. target 不 存 
在 ， 脚 本 就 使 用 e.srcElement 的 值 。 



























































实践 
列 出 onClick 事 件 的 属性 


使 用 简单 的 小 程序 就 可 以 列 出 一 个 事件 的 全 部 属性 和 相关 的 值 。 现 在 以 按钮 元 素 的 
onClick 事 件 为 例 ， 获 得 它 的 属性 和 值 ， 显 示 到 屏幕 上 。 


创建 一 个 HTML 文 档 ， 输 入 程序 清单 9.2 所 示 的 代码 。 
程序 清单 9.2 ”获得 onClick 事 件 的 属性 






























































<!DOCTYPE html> 


<html> 
<head> 
<title>The event object</title> 
<script> 
function showEvent() { 
var out = ""; 
document. getElementById("myButton").onclick = function (e) { 
if (!e) var e = window.event; 
for(i ine) { 
out += i+ "=" + efi] + "<br/>"; 
} 
document .getElementById("output").innerHTML = out; 
} 
} 
window.onload = showEvent; 
</script> 
</head> 
<body> 


<input id="myButton" type="button" value="Show Event Properties" /> 
<div id="output"></div> 
</body> 
</html> 
HTML 文 档 的 body 部 分 只 有 两 个 元 素 : 一 个 按钮 接收 onClick 事 件 ， 一 个 <div> 元 素 接 
收 脚本 的 输出 。 
<input id="myButton" type="button" value="Show Event Properties" /> 
<div id="output"></div> 


按钮 onClick 事 件 处 理 器 里 的 函数 捕获 onClick 
性 ， 把 内 容 添加 到 输出 字符 串 。 


最 后 ， 脚 本 把 输出 字符 串 赋 予 <div> 元 素 的 innerHTML 属 性 ， 从 而 在 页 面 显示 内 容 。 
document.getElementById("myButton").onclick = function (e) { 
if (!e) var e = window.event; 
for(i ine) { 
out t= i + " = " + efi] + "<br/>"; 

















fi 





和 件 创建 的 对 象 ， 裔 历 event 事 件 的 属 














} 
document.getElementById("output").innerHTML = out; 





脚本 的 运行 结果 如 图 9.2 所 示 。 














X The event object - Chromium 
|/ @ The event object NE 





a- +x 





layerX = 111 

y=23 

returnValue = true 

clientX = 111 

which = 1 

shiftKey = false 

currentTarget = [object HTMLInputElement] 
timeStamp = 1327067468993 
eventPhase = 2 

cancelable = true 

bubbles = true 

screenX = 409 

x=111 

button = 0 

defaultPrevented = false 
altKey = false 

keyCode = 0 

offsetY = 13 

clientY = 23 

view = [object DOMWindow 





图 9.2 ”获得 onClick 事 件 的 属性 
尝试 在 不 同 的 浏览 器 运行 这 段 脚本 ， 比 较 得 到 的 结果 有 什么 不 同 。 
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95 事件 处 理 器 高 级 注册 方式 
到 目前 为 止 ， 本 书 中 介绍 了 两 种 添加 事件 处 理 器 的 方式 。 第 一 种 是 


BRR, 即 以 HTML 标 签 属性 的 形式 添加 ， 并 Pr Bev ea MO 比 
H: 


element.onclick = myFunction; 


这 种 方式 显然 有 些 混乱 ， 把 HTML 和 JavaScript 代 码 混合 在 一 起 ， 影 
响 了 代码 的 灵活 性 和 可 维护 性 。 


第 二 种 方法 好 些 ， 但 有 个 明显 的 缺点 ， 每 个 属性 只 能 添加 一 个 

件 处 理 函 数 。 如 果 想 给 onclick 属 性 注 册 两 个 事件 处 理 器 ， 怎 么 办 呢 ? 妇 

果 在 

element.onclick = myFunction; 
之 后 又 添加 一 行 : 

element.onclick = ed 

第 二 行 语句 的 赋值 会 覆盖 前 一 个 ， 事 件 触发 时 并 不 会 调 


myFunction()。 


当然 ， 为 了 解决 这 个 问题 ， 我 们 可 以 把 两 个 函数 包装 为 一 个 函数 ， 
达到 执行 两 个 函数 的 目的 : 


element.onclick = function() { 
myFunction; 
myOtherFunction; 
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这 虽然 实现 了 运行 两 个 函数 的 目的 ， 但 并 没有 达到 我 们 所 期 望 的 灵 
活性 ， 如 稍 后 我 们 想 去 除 其 中 一 个 函数 ， 或 是 想 添 加 第 三 个 函数 。 


好 在 还 有 更 好 的 方式 来 注册 事件 处 理 器 ， 具 有 我 们 期 望 的 灵活 性 
但 不 幸 的 是 ，W3C 和 微软 在 这 方面 又 使 用 不 同 的 实现 方式 。 
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9.5.1 W3C 方 式 


W3C 提 供 了 addEventListener 和 removeEventListener 方 法 ， 可 以 根据 
需要 添加 和 删除 任意 数量 的 事件 处 理 器 : 


element.addEventListener('click' ,myFunction, false) ; 
element.addEventListener('click' ,myOtherFunction, false) ; 


第 一 个 参数 指明 要 捕获 的 事件 ， 第 二 个 参数 指明 事件 要 执行 的 函 























山中 











aint 
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处 理 的 顺序 。 举 例 来 说 ， 当 用 户 点 击 <div> 元 素 里 的 <p> 元 素 时 ， 哪个 元 
AASE HE oncle 般 情 况 下 ， 第 三 个 参数 设 
置 为 false。 


当 两 个 或 多 个 幅 套 元 素 捕 获 到 同一 个 事件 时 ， 浏 览 器 厂家 和 W3C 采 取 两 种 方式 之 一 进行 
处 理 。 一 种 称 为 “捕获 "， 也 就 是 外 部 的 元 素 首先 运行 事件 处 理 器 ， 然 后 是 嵌 套 的 元 素 ， 逐 渐 向 
内 层 深 入 。 另 一 种 是 “ 冒 泡 ?方式 ， 也 就 是 最 内 部 的 事件 处 理 器 首先 执行 ， 由 内 向 外 逐渐 执行 。 
关于 这 两 种 方式 的 详细 介绍 请 见 www.quirksmode.org/js/events_ordert.html 。 




















































































































如 果 想 去 除 某 个 事件 处 理 器 ， 只 需 使 用 removeEventListener: 
element.removeEventListener('click',myFunction,fTfalse); 
9.5.2 ”微软 方式 

微软 提供 了 两 种 类 似 的 方法 : attachEvent 和 detachEvent。 








element.attachEvent('onclick' ,myFunction) ; 
element.detachEvent('onclick' ,myFunction) ; 


























这 些 函数 没有 第 三 个 参数 。 而 且 可 以 发 现 微软 在 事件 名 称 前 面 使 用 
前 级 on， 所 以 onClick 事 件 对 应 于 W3C 规 范 里 的 dick， 对 应 于 微软 浏览 
器 里 的 onclick。 


9.5.3” 跨 浏览 器 的 实现 方式 


实现 跨 浏 览 器 的 事件 处 理 并 不 复杂 ， 仍 然 是 
以 使 用 哪 种 事件 处 理 方式 : 


function addEventHandler(element,eventType,handlerFunction) { 
if (element.addEventListener) { 
element.addEventListener (eventType,handlerFunction, false); 
} else if (element.attachEvent) { 
element.attachEvent ('on'+eventType,handlerFunction); 













































































=> 
ie 
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j 特 性 检测 来 判断 可 
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} 

var eventType = 'click'; 

var myButton = document .getElementById('buttonð1'); 
addEventHandler (myButton,eventType,myFunction); 


去 除 事 件 处 理 器 的 跨 平台 方式 也 很 直观 : 


function removeEventHandler(element,eventType,handlerFunction) { 
if (element.removeEventListener) { 
element.removeEventListener(eventType,handlerFunction,false); 
} else if (element.detachEvent) { 
element.detachEvent ('on'+eventType,handlerFunction) ; 











} 


removeEventHandler(myButton, eventType,myFunction) ; 


作为 下 的 最 新 版 本 ，IE 9 支持 W3C 的 方法 addEventListener 和 removeEventL istener。 为 了 更 
| 好 地 实现 跨 平 台 解 决 方案 ， 我 们 使 用 功能 检测 而 不 是 浏览 器 检测 。 



































实践 
添加 和 删除 事件 处 理 器 
现在 利用 前 面 的 跨 平台 方法 给 一 些 HTML 按钮 添加 和 删除 onClick 事 件 处 理 器 。 创 建 一 





























HTML 3C(E, ATETEA 


和 9.3 所 示 的 代码 。 





9.3 ”添加 和 删除 寻 








WEH 
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<!DOCTYPE html> 
<html> 
<head> 
<title>Adding and Removing Event Handlers</title> 
<script src="events.js"></script> 
</head> 
<body> 
<input id="buttonA" type="button" value="Button A" /> 
<input id="button-a" type="button" value="Remove onClick Handler from 
button A" /><br/> 
<input id="buttonB" type="button" value="Button B" /> 
<input id="button-b" type="button" value="Remove onClick Handler from 
button B" /><br/> 
<input id="reset" type="button" value="Reset" /> 
<div id="divi" style="border:1px solid 
black ;width:300px;height:200px;" ></div> 
</body> 
</html> 


这 个 简单 的 HTML 页 面 在 一 个 <div> 元 素 里 显示 ee 在 本 例 中 ， 我 们 将 把 
JavaScript 代 码 都 放 到 一 个 外 部 文件 events.js 里 ， 并 在 页 面 的 <head> 区 域 链接 它 Be 


JavaScript 代 码 要 完成 的 操作 包括 : 


。 首先 是 给 ButtonA 和 ButtonB 添 加 事件 处 理 器 ， 从 而 捕获 onClick 事 件 ， 把 被 点 击 按钮 

的 id 和 输出 到 页 面 的 <div> 元 素 。 

。 给 标签 为 “Remove onClick Handler” 的 按钮 添加 事件 处 理 器 ， 捕 获 这 些 按钮 的 onClick 

事件 ， 删 除 ButtonA 和 ButtonB 的 事件 处 理 器 。 

。 给 第 五 个 按钮 添加 onClick 事 件 处 理 器 ， 把 ButtonA 和 ButtonB 恢 复 到 初始 状态 ， 也 就 
是 重新 添加 它们 的 onClick 事 件 处 理 器 。 

































































程序 清单 9.4 events.js 的 JavaScript 代 码 





function addEventHandler(element,eventType,handlerFunction) { 
if (element.addEventListener) { 
element .addEventListener(eventType,handlerFunction, false); 

} else if (element.attachEvent) { 
element.attachEvent ('on'+eventType,handlerFunction) ; 


} 


function removeEventHandler(element,eventType,handlerFunction) { 
if (element.removeEventListener) { 
element .removeEventListener(eventType, handlerFunction, false); 

} else if (element.detachEvent) { 
element.detachEvent ('on'+eventType,handlerFunction) ; 


} 


function appendText(e) { 


if (!e) var 
var element 


e = window.event; 
= (e.target) ? e.target 


: e.srcElement; 


document .getElementById('div1').innerHTML += element.id + "<br/>"; 


} 


function removeOnClickA() { 


removeEventHandler (document.getElementById('‘buttonA'),'click',appendText) ; 


} 


function removeOnClickB() { 


removeEventHandler (document.getElementById('buttonB'),'click',appendText) ; 


} 


function reset() 


addEventHandler(document.getElementById('buttonA'),'click',appendText) ; 
addEventHandler(document.getElementById('buttonB'),'click',appendText) ; 


} 


{ 


window.onload = function() { 
addEventHandler (document .getElementById('button-a'),'click', 


removeOnClickA) ; 


addEventHandler(document.getElementById('button-b'),'click', 


removeOnClickB) ; 


addEventHandler(document.getElementById('reset'),'click',reset) ; 


reset(); 


} 


这 段 代 码 看 上 去 似乎 有 些 复杂 ， 我 们 来 一 步 一 步 加 以 解释 。 
首先 ， 声 明了 两 个 函数 addEventHandler 和 removeEventHandler， 以 跨 浏 览 器 的 方式 分 














别 用 于 添加 和 删除 
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接着 声明 一 个 函数 appendText， 使 




















本 章 前 

















介绍 的 技术 判断 调 




















元 素 ， 把 它 的 id 





属 


性 添加 到 <div> 部 分 的 输出 区 域 : 


function appendText(e) { 
if (!e) var e = window.event; 
var element = (e.target) ? e.target : e.srcElement; 
document.getElementById('divi').innerHTML += element.id + "<br/>"; 


接 下 来 的 removeOnClickA 和 removeOnClickB 方 法 分 别 删除 ButtonA 和 ButtonB 的 
appendText ei 2: 
function removeOnClickA() { 
removeEventHandler (document .getElementById('buttonA'),'click', 
appendText) ; 
} 
function removeOnClickB() { 
removeEventHandler (document .getElementById( 'buttonB'),'click', 
appendText) ; 
} 























点 击 Reset 按 钮 会 执行 函数 reset0， 后 者 两 次 调用 addEventHandler， 把 appendText 函 数 
添加 到 ButtonA 和 ButtonB 的 onClick 事 件 处 理 器 。 





function reset() { 
addEventHandler(document.getElementById('buttonA'),'click',appendText) ; 
addEventHandler(document.getElementById( 'buttonB'), 'click',appendText) ; 
} 











最 后 ， 利 用 window.onload 事 件 在 HIML 页 面 加 载 完成 时 设置 脚本 的 初始 状态 。 

全 
addEventHandler(document ,getEJementById( button - 
™a'),'click' ,removeOnClickA) ; 


addEventHandler (document .getElementById( 'button- 
b'),'click',removeOnClickB) ; 


接着 是 给 Reset 按 钮 的 onClick 事 件 添加 处 理 器 : 
addEventHandler(document.getElementById('reset'),'click',reset) ; 


然后 就 可 以 调用 reset() 方 法 给 ButtonA 和 ButtonB 添 加 onClick 处 理 程序 ， 完 成 对 页 面 的 
初始 化 。 


9.3 展 示 了 页 面 运行 的 情况 。 点 击 ButtonA 和 ButtonB 分 别 会 把 按钮 的 id 显示 在 输出 
域 。 而 点 击 标签 为 “<Remove...” 的 按钮 ， 就 会 从 相应 的 按钮 删除 事件 处 理 程序 ， 让 点 击 相 

















先是 给 标签 为 “Remove...” 的 按钮 添加 onClick 事 


Ra 
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应 按钮 变 得 没有 反应 ， 直 到 点 击 Reset 按 钮 恢复 初始 状态 。 


~ Adding and Removing Event Handlers - Chromium a- +X 


@ Adding and Removing \e 
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Remove onClick Handler from button A 
Button Remove onClick Handler from button B 








图 9.3 ”添加 和 删除 事件 处 理 器 
在 浏览 器 里 加 载 完成 之 后 的 页 面 ， 查 看 操作 情况 。 
























































本 章 介 绍 了 不 少 如 何 使 用 JavaScript 处 理事 件 的 知识 ， 包 括 添加 内 联 
ghee 利 JavaScript 语 句 添加 事件 处 到 EE 器， 以 及 利用 
addEventListener 和 attachEvent 创 建 能 够 跨 浏览 器 使 用 的 方法 。 




























































































9.7 问答 


问 : 一 段 需要 检测 鼠标 点 击 的 脚本 在 正中 运行 不 
么 问题 ? 


答 : 这 也 是 由 于 微软 与 W3C 规 范 略 有 差别 造成 的 。 它 们 的 event 对 
象 都 有 button 属 性 ， 但 其 返回 的 整数 值 是 不 一 样 的 。 


在 W3C 浏 览 器 里 ， 鼠 标 左 键 返 回 0， 中 键 返回 1， 右 键 返回 2。 
在 微软 浏览 器 里 ， 左 键 返回 1， 右 键 返 回 2， 中 键 返 回 4。 这 种 返回 
值 的 规定 似乎 有 些 奇怪 ， 但 实际 上 ， 它 们 都 是 2 的 曼 ， 所 以 返回 的 数值 
能 够 表示 出 按钮 同时 按 下 的 状态 。 比 如 数值 3， 就 表示 左 键 和 右键 同时 
BEF. 
H: 在 编写 跨 浏览 器 的 代码 时 ， 如 何 判 断 按 下 了 哪个 键 ? 


Z: 查看 事件 的 keyCode 属 性 。 但 不 要 忘记 首先 以 跨 浏 览 器 的 方式 
获得 event 对 象 。 
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常 ， 可 能 是 什 








































































































document.onkeydown = function(e) { 
if (!e) var e = window.event; 
alert(e.keyCode + " is the code for " + 
String. fromCharCode(e.keyCode) ) ; 


} 


9.8 
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9.8.1 


1. 
认 行 为 


9.8.2 
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作业 














先 回答 问题 ， 再 
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测验 
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a， 从 事件 处 理 器 返回 





后 面 的 答案 。 





如 何在 执行 了 onClick 事 件 处 到 











b. 从 


事件 处 理 器 返回 








c， 默 认 行 为 不 能 被 禁止 
2. window.onload 事 件 何 时 触发 ? 











a. 浏览 器 完整 加 载 
b. 浏览 器 开始 加 者 





页 面 时 











面 时 


JA TH 








c. 页 面 <head> 部 分 加 载 完 成 时 
. 对象 在 哪些 浏览 器 里 

















值 cancel 
布尔 值 false 
































a， 全 部 浏览 





b. W3C 浏 览 
c. 微软 浏览 
答案 


会 收 到 名 为 target 的 事件 ? 




















. 选 b。 返 回 布尔 值 false 可 以 阻止 元 素 的 默认 行为 。 
选 a。 当 页 面 完 整 加 载 到 浏览 器 时 ， 会 触发 onload 寻 





器 之 后 防止 执行 HTML 元 素 的 默 





ck 








3. 选 b。W3C 浏 览 器 使 





名 称 是 srcElement。 














j 名 为 target 的 事件 ， 微 软 浏览 器 相应 的 事 





99 练习 


修改 程序 清单 9.1 的 代码 ， 增 加 对 phone 字 段 是 否 为 空 的 检测 ， 让 程 
序 只 输出 一 条 提示 信息 ， 说 明 哪个 字段 需要 填写 。 


在 由 程序 清单 9.3 和 9.4 组 成 的 练习 中 ， 实 现 这 样 一 个 功能 : Wd 
<div> 元 素 时 清空 其 中 的 内 容 。〔( 提 示 : 在 页 面 初始 化 时 添加 一 个 事件 
处 理 器 ， 给 <div> 元 素 的 dblclick 事 件 添 加 处 理 程序 ， 调 用 函数 把 <div> 元 
素 的 innerHTML 设 置 为 空 字 符 串 。) 
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510% JavaScript#ll cookie 


本 章 主要 内 容 包括 : 


什么 是 cookie 
cookie 的 属性 
如 何 设置 和 取 回 
cookie 的 有 效 期 
如 何在 一 个 cookie 里 保存 多 个 数据 项 
Hi cookie 
数据 的 编码 和 解码 
cookie 的 局 限 


本 书 前 面 介 绍 的 JavaScript 技 术 还 不 能 E 信 息 从 个 页 面 传 递 给 另 一 
， 而 cookie 提 供 了 一 种 便捷 的 方式 ， 能 够 在 用 户 的 计算 机 上 保存 
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面 户 
数据 并 且 远 程 获得 它们 ， 从 而 让 网 站 可 以 保存 些 细节 信息 ， 比 如 
的 习惯 设置 或 是 上 一 次 访问 网 站 的 时 间 。 


本 章 将 介绍 如 何 使 用 JavaScript 创 建 、 保 存 、 获 取 和 删除 cookie。 

































































10.1 什么 是 cookie 


把 Web 页 面 加 载 到 浏览 器 所 使 用 的 HTTP 协 议 是 一 种 “无 状态 ” 协 
议 ， 也 就 是 说 ， 当 服务 器 把 页 面 发 送 给 浏览 器 之 后 ， CE 
了 ， 并 不 保存 任何 信息 。 这 给 在 浏览 器 会 话 期 间 COE ESTA ZMH) 2 
持 某 种 连续 性 带 来 了 困难 ， 比 如 记录 用 户 已 经 访问 或 下 载 过 哪些 内 容 ， 
或 是 记录 用 户 在 私有 区 域 的 登录 状态 。 


cookie 就 是 解决 这 个 问题 的 一 个 途径 。 举 例 来 说 ，cookie 可 以 记录 
用 户 的 最 后 一 次 访问 ， 保 存 用 户 偏 好 设置 的 列表 ， 或 是 当 用 户 继续 购物 
时 条 存 购物 车 里 的 物品 。 在 正确 使 用 的 情况 下 ，cookie 能 够 改善 站 点 的 
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cookie 本 身 是 一 些 短小 的 信息 串 ， 能 够 由 页 面 保存 在 用 户 的 计算 机 
， 然 后 可 以 被 其 他 页 面 读 取 。cookie 一 般 都 设置 为 在 一 定时 间 后 失 












































很 多 用 户 不 允许 站 点 在 自己 的 计算 机 上 保存 cookie， 所 以 在 编程 时 注意 不 要 让 站 点 完全 依 


























| :喜欢 cookie 的 通常 原因 是 有 些 站 点 把 cookie 作 为 一 种 广告 手段 ， 利 用 它们 追踪 用 户 
| 在 级 行为 ， 从 而 进行 有 针对 性 的 广告 。 但 这 也 是 一 个 范例 ， 说 明了 为 什么 要 使 用 cookie 以 及 
将 它 用 于 什么 领域 。 




















































































































cookie 的 局 限 

浏览 器 对 于 能 够 保存 的 cookie 数 量 有 所 限制 ， 通 常 是 几 百 个 或 多 一 
点 。 一 般 情况 下 ， 每 个 域名 20 个 cookie 是 允许 的 ， 而 每 个 域 最 多 能 保存 
4KB 的 cookie。 


























除了 尺寸 限制 可 能 导致 的 问题 ， 有 很 多 原因 都 可 能 导致 硬盘 上 的 
cookie 消 失 ， Pear 有效 期限 了， 或 是 用 户 清理 cookie 信 息 了 ， 或 是 
换 用 其 他 浏览 器 了 。 因 此 ， 永 远 都 不 应 该 使 用 cookie 保 存 重 要 数据 ， 而 
在 编写 ete 定 要 考虑 到 不 能 获取 所 期 望 cookie 时 的 情况 。 






























































































































































10.2 document.cookie)x E 














JavaScript 使 用 document 对 象 的 cookie 属 性 存储 和 获取 cookie。 


= Stepper 成 对 的 名 称 和 值 组 成 的 字符 串 ， 像 下 
这 样 ; 


username=saMm 


当 页 面 加 载 到 浏览 器 里 时 ， 浏 览 器 会 收集 与 页 面相 关 的 全 部 
cookie， 放 到 “类 似 字 符 串 ”的 document.cookie 属 性 里 。 在 这 个 属性 里 ， 
每 个 cookie 是 以 分 号 分 隔 的 : 


username=sam; location=USA;status=fullmember; 
E 


作者 认为 document.cookie 是 个 “类 似 字符 串 ” 的 属性 ， 因 为 它 并 不 是 真正 的 字符 串 ， 只 是 在 
提取 cookie 信 息 时 ， 这 个 属性 的 表现 像 个 字符 串 而 已 。 


数据 的 编码 和 解码 
某 些 字符 不 能 在 cookie 里 使 用 ， 包 插 分 号 、 逗 号 及 空白 符号 (比如 
空格 和 制 表 符 ) 。 在 把 数据 存储 到 cookie 之 前 ， 需 要 对 数据 进行 编码 ， 
以 便 实现 正确 的 存储 。 


在 存储 信息 之 前 ， 使 用 JavaScript 的 escapeO 函 数 进行 编码 ， 而 获得 
原始 的 cookie 数 据 时 就 使 用 相应 的 unescapeO 函 数 进行 解码 。 


escape(0) 函 数 把 字符 串 里 任何 非 ASCI 字 符 都 转换 为 相应 的 2 位 或 4 位 
上 六 进 制 格 式 ， 比 如 空格 转换 为 %20，&& 转 换 为 %26。 


举例 来 说 ， 下 面 的 代码 会 输出 变量 str 里 保存 的 原始 字符 串 及 
escape() 编 码 以 后 的 结果 : 


var str = ‘Here is a (short) piece of text.'; 
document.write(str + ‘<br />' + escape(str)); 





































































































































































































































































































































































































屏幕 上 的 输出 应 该 是 : 


Here is a (short) piece of text. 
Here%20is%20a%20%28short%29%20piece%200f%20text. 





可 以 看 到 空格 被 表示 为 %20， 左 括号 是 %28， 右 括号 是 %29。 
除了 *、@、-、_、+、.、/ 之 外 的 特殊 符号 都 会 被 编码 。 








10.3 cookie 组 成 


document.cookie 4 


符 串 ， 每 一 对 数据 的 形式 是 : 


Ad 


3 
































name=value; 


但 实际 上 cookie 还 包含 其 他 一 些 相关 信息 ， 下 面 来 分 别 介 














2011 年 发 布 的 RFC6265 是 cookie 的 正式 规范 
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10.3.1 cookieName fil cookieValue 


的 信息 看 上 去 就 像 是 由 成 对 的 名 称 和 值 组 成 的 字 


ttp://tools.ietf.org/html/rfc6265 。 


cookieName 和 cookieValue 就 是 在 cookie 字 符 串 里 看 到 的 name=value 














里 的 名 称 与 值 。 





10.3.2 domain 


domain 属 性 向 浏览 器 指明 cookie 属 了 
在 没有 指定 时 ， 默 认 值 是 设置 cookie 的 页 面 所 在 的 域 。 






































这 个 属性 的 作用 在 于 控制 子 域 对 cookie 的 操作 。 





设置 为 www.example.com ， 那 么 子 域 code.example.com 里 























读 取 这 个 cookie。 但 








于 哪个 域 。 这 个 属性 














是 可 选 的 ， 


举例 来 说 ， 如 果 其 























的 页 面 就 不 能 


如 果 domain 属 性 设置 为 example.com， 那 么 



































code.example.com 里 的 页 面 就 能 访问 这 个 cookie 了 。 


但 是 ， 不 能 把 domain 属 性 设置 为 页 面 所 在 域 之 外 的 域 。 





10.3.3 path 











mu cookie 的 值 ， 就 把 





































































































path 属 性 指定 可 以 使 用 cookie 的 目录 。 如 果 只 想 让 目录 documents 里 
path 设 置 为 /documents。 这 个 属性 是 可 选 
或 里 使 用 。 








的 ， 常 用 的 默认 路 径 是 /， 表 示 cookie 可 以 在 整个 














10.3.4 secure 


secure} 14 


E 是 可 选 的 ， 而 且 几 平和 
cookie 发 送 给 月 














民 少 使 用 。 














及 务 器 时 ， 是 否 应 该 使 




















10.3.5 expires 

















每 个 cookie 都 有 个 失效 




















期 ， 过 期 就 自动 删除 了 
UTC 时 间 表 示 。 如 果 没 有 设 
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E, cookie 





长 ， 会 在 浏览 器 关闭 时 自如 


删除 。 


J 它 表 示 浏 览 器 在 把 
SLL 安 全 标准 。 











了 。expires 属 性 要 以 





E 命 期 就 和 当前 浏览 


10.4 ”编写 cookie 


要 编写 新 的 cookie， 只 要 把 包含 所 需 属 性 的 值 赋予 document.cookie 
就 可 以 了 : 


























document . cookie="username=sam; expires=15/06/2013 00:00:00"; 





























使 用 JavaScript 的 Date 对 象 可 以 避免 手工 输入 日 期 和 时 间 格 式 ; 


var cookieDate = new Date ( 2013，05，15 ); 
document.cookie = "“username=sam;expires=" + cookieDate.toUTCString(); 


到 与 前 面 一 样 的 结果 。 
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注意 到 这 里 使 用 了 cookieDate.toUTCString(); 而 不 是 cookieDate.toString();， 这 是 因为 cookie 
的 时 间 要 以 UTC 格 式 设置 。 


在 实际 编写 代码 时 ， 应 该 用 escape(O) 函 数 来 确保 在 给 cookie 赋 值 时 不 
会 有 非法 字符 : 

var cookieDate = new Date ( 2013, 05, 15 ) 

var user = "Sam Jones"; 


document.cookie = "username=" + escape(user) + ";expires=" + 
™»cookieDate.toUTCString(); 



































10.5 ”编写 cookie 的 函数 


很 自然 就 会 想到 编写 一 个 函数 专门 用 于 生成 cookie， 完 成 编码 和 可 
选 属性 的 组 合 操作 。 程 序 清 单 10.1 列 出 了 这 样 的 一 个 函数 代码 。 


程序 清单 10.1 编写 cookie 的 函数 
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function createCookie(name, value, days, path, domain, secure) { 
if (days) { 
var date = new Date(); 
date.setTime(date.getTime() + (days*24*60*60*1000) ); 
var expires = date.toGMTString(); 


} 

else var expires = ""; 

cookieString = name + "=" + escape (value); 

if (expires) cookieString += "; expires=" + expires; 
if (path) cookieString += "; path=" + escape (path); 


if (domain) cookieString += "; domain=" + escape (domain) ; 
if (secure) cookieString += "; secure"; 
document.cookie = cookieString; 























这 个 函数 执行 的 操作 是 相当 直观 的 ，name 和 value 参 数组 合 得 
到 “name=value”， 其 中 的 value 还 经 过 编码 以 避免 非法 字符 。 


在 处 理 有 效 期 时 ， 使 用 的 参数 不 是 具体 日 期 ， 而 是 cookie 有 效 的 天 
数 。 函 数 根据 这 个 天 数 生成 有 效 的 日 期 字符 串 。 


其 他 属性 都 是 可 选 的 ， 如 果 设 置 了 ， 就 会 附加 到 组 成 cookie 的 字符 
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如 果 现 在 把 这 段 代 码 加 载 到 浏览 器 里 ， 浏 览 器 本 身 的 安全 机 制 可 能 会 阻止 它 的 运行 。 为 
了 运行 这 段 代码 ， 需 要 把 文件 上 传 到 互联 奖 或 局 域 网 的 Web 服 务 器 。 











实践 
编写 cookie 


现在 来 利用 这 个 函数 设置 一 些 cookie 值 ， 代 码 如 程序 清单 10.2 所 示 。 新 建文 件 
testcookie.html， 输 入 清单 里 的 代码 。 其 中 名 称 和 值 的 数据 可 以 随意 调整 。 


程序 清单 10.2 编写 cookie 
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<!DOCTYPE html> 


<html> 
<head> 
<title>Using Cookies</title> 
<script> 
function createCookie(name, value, days, path, domain, secure) { 
if (days) { 
var date = new Date(); 
date.setTime(date.getTime() + (days*24*60*60*1000) ) ; 
var expires = date.toGMTString(); 
} 
else var expires = ""; 
cookieString = name + "=" + escape (value); 
if (expires) cookieString += "; expires=" + expires; 
if (path) cookieString += "; path=" + escape (path); 
if (domain) cookieString += "; domain=" + escape (domain); 
if (secure) cookieString += "; secure"; 
document.cookie = cookieString; 
} 


createCookie("username","Sam Jones", 5); 
createCookie("location","USA", 5); 
createCookie("status","fullmember", 5); 

</script> 

</head> 

<body> 

Check the cookies for this domain using your browser tools. 

</body> 

</html> 

提示 : 





这 个 函数 每 次 被 调用 时 ， 就 会 给 document.cookie 设 置 新 值 ， 但 新 值 不 会 覆盖 现 有 的 值 ， 而 是 把 新 值 附 加 到 
原 有 值 。 正 如 前 面 所 说 的 ，document.cookie 有 时 显得 像 个 字符 串 ， 但 又 的 确 不 是 字符 串 


把 这 个 HTML 文 档 上 传 到 互联 网 主机 或 局 域 网 上 的 Web 服 务 器 。 加 载 这 个 页 面 只 会 看 
到 一 行 信息 : 


Check the cookies for this domain using your browser tools. 


在 Chromium 浏 览 器 里 ， 按 Shift+Ctrl+I 组 合 键 可 以 打开 开发 工具 ， 如 图 10.1 所 示 。 对 于 
其 他 浏览 器 ， 请 查看 相关 文档 了 解 如 何 查看 cookie 信 息 。 
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Check the cookies for this domain using your browser tools. 








图 Elements 图 Resources| © Network % Scripts Timeline » [Q Search Re 








a| Name Value | Domain P | Expires Size | HTP Se... 
> E Local Storage username |Sam%20jones | mousewhisperer.co.uk |/ | Mon, 30 Jan 2012 15:41:1... 19 
> (Bi Session Storage location USA mousewhisperer.co.uk 1 | Mon, 30 Jan 2012 15:41:1... u 
了 国 cookies status fullmember | mousewhisperer.co.uk |/ | Mon, 30 Jan 2012 15:41:1... 16 
































GQ) | Errors Warnings Logs 








图 10.1 显示 cookie 





10.6 ” 读 取 cookie 


还 记得 split0 函 数 吗 ? 读 取 cookie 值 的 过 程 在 很 大 程度 上 是 依赖 于 它 
的 。 这 个 函数 以 参数 指定 的 字符 作为 分 隔 符 ， 把 分 解 的 结果 保存 到 数组 












































myString = "John#Paul#George#Ringo' ; 
var myArray = myString.split('#'); 


上 述 语句 会 把 字符 串 myString 在 每 个 “#* 位 置 进行 切割 ， 分 解 为 一 系 
和 独 的 部 分 。myArray[0] 会 保存 “John”，myArray[1] 保 存 “Paul”， 以 此 
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在 document.cookie 里 ， 每 个 cookie 是 以 “;" 分 隔 的 ， 显 然 我 们 就 应 该 
使 用 这 个 符号 来 分 解 document.cookie 返 回 的 字符 串 P: 


























var crumbs = document.cookie.split(';'); 


我 们 要 获得 特定 名 称 的 cookie， 所 以 接 下 来 要 对 数组 crumb 进 行 搜 
索 ， 得 到 特定 的 name= 部 分 。 


然后 使 用 indexOf() 和 substring() 返 回 cookie 值 的 部 分 ， 
unescape0 函 数 进行 解码 ， 得 到 cookie 值 : 




































































通过 














function getCookie(name) { 
var nameEquals = name + "="; 
var crumbs = document.cookie.split(';'); 
for (var i = 0; i < crumbs.length; i++) { 
var crumb = crumbs[i]; 
if (crumb.indexOf(nameEquals) == 0) { 
return unescape(crumb.substring(nameEquals.length, 
™crumb.length) ) ; 
} 
} 


return null; 


10.7 删除 cookie 


要 想 删 除 一 个 cookie， 只 需要 把 它 的 失效 日 期 设置 为 今天 以 前 的 日 
期 浏览 器 就 会 认为 它 已 经 失效 了 ， 从 而 删除 它 。 


function deleteCookie(name) { 
createCookie(name,"",-1); 






























































即使 在 脚本 里 删除 了 cookie， 某 些 浏览 器 的 有 些 版 本 也 会 把 cookie 维 持 到 重新 启动 浏览 
器 。 如 果 cookie 是 否 被 删除 是 程序 运行 的 条 件 ， 就 应 该 使 用 getCookie 来 测试 被 删除 的 cookie， 
确保 它 的 确 不 存在 了 。 





























使 用 cookie 
利用 前 面 介 绍 的 知识 ， 我 们 来 建立 一 些 页 面体 验 cookie 操 作 。 


首先 ， 把 createCookie()、getCookie() 和 deleteCookie() 函 数 集中 到 一 个 JavaScript 文 件 
里 ， 保 存 为 cookies.js， 代 码 如 程序 清单 10.3 所 示 。 





























程序 清单 10.3 cookies.js 








function createCookie(name, value, days, path, domain, secure) 
if (days) { 
var date = new Date(); 
date.setTime( date.getTime() + (days*24*60*60*1000) ); 
var expires = date.toGMTString(); 
} 
else var expires = ""; 
cookieString = name + "=" + escape (value); 


if (expires) cookieString += "; expires=" + expires; 

if (path) cookieString += "; path=" + escape (path); 

if (domain) cookieString += "; domain=" + escape (domain); 
if (secure) cookieString += "; secure"; 

document.cookie = cookieString; 


function getCookie(name) { 
var nameEquals = name + "="; 
var crumbs = document.cookie.split(';'); 
for (var i = 0; i < crumbs.length; i++) { 
var crumb = crumbs[i]; 
if (crumb.indexOf(nameEquals) == 0) { 
return unescape(crumb.substring(nameEquals.length, 
crumb.length) ) ; 
} 
} 


return null; 


function deleteCookie(name) { 
createCookie(name,"",-1); 























测试 页 面 的 <head> 部 分 会 引用 这 个 文件 ， 我 们 就 可 以 在 代码 里 使 用 这 三 个 函数 了 。 


第 一 个 测试 页 面 〈cookietesthtml) 的 代码 如 程序 清单 10.4 所 示 ， 第 二 个 测试 页 面 
(Ccookietest2.html) 的 代码 如 程序 清单 10.5 所 示 。 


























程序 清单 10.4 cookietest.html 








<!DOCTYPE html> 
<html> 
<head> 
<title>Cookie Testing</title> 
<script src="cookies.js"></script> 
<script> 
window.onload = function() { 
var cookievalue = prompt("Cookie Value:"); 
createCookie("myCookieData", cookievalue) ; 
} 
</script> 
</head> 
<body> 
<a href="cookietest2.html">Go to Cookie Test Page 2</a> 
</body> 
</html> 


程序 清单 10.5 cookietest2.html 








<!DOCTYPE html> 
<html> 
<head> 
<title>Cookie Testing</title> 
<script src="cookies.js"></script> 
<script> 
window.onload = function() { 
document.getElementById("output").innerHTML = "Your cookie 
value: " + getCookie("myCookieData") ; 
} 
</script> 
</head> 
<body> 
<a href="cookietest.html">Back to Cookie Test Page 1</a><br/> 
<div id="output"></div> 














</body> 
</html> 
cookietest.html 里 唯一 可 见 的 页 面 内 容 是 一 个 链接 ， 指 向 第 二 个 页 面 cookietest2.html。 























这 段 脚 本 捕获 了 window.onload 事 件 ， 在 页 面 加 载 完 成 时 就 显示 一 个 promptO 对 话 框 ， 请 
户 输 入 一 个 要 保存 到 cookie 的 值 ， 然 后 调用 createCookie(0) 函 数 把 cookie 的 名 称 设 置 为 
myCookieData， 其 值 为 用 户 输入 的 内 容 。 


cookietest.html 的 运行 情况 如 图 10.2 所 示 。 






















































































v Cookie Testing - Chromium 
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Go to Cookie Test Page 2 








~ The page atwww ~ * 


i) Cookie Value: 


[sams | 

















Waiting for www.mousewhisperer.co.uk... 


图 10.2 输入 cookie 的 值 
在 设置 了 cookie 值 之 后 ， 点 击 链 接 跳 转 到 cookietest2.html。 


在 这 个 页 面 加 载 之 后 ，window.onload 事 件 处 理 器 执行 一 个 函数 ， 利 
保存 在 cookie 里 的 值 ， 输 出 到 页 面 上 ， 如 图 10.3 所 示 。 
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getCookie() 获 取 
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图 Cookie Testing G 
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Back to Cookie Test Page 1 





Your cookie value: SAMS 








图 10.3 ”获取 cookie 的 值 


为 了 实现 这 个 练习 ， 需 要 把 cookietest.html、cookietest2.html 和 cookies.js 上 传 到 互联 网 
主机 《或 局 域 网 的 web 服务 器 ) ， 否 则 浏览 器 安全 机 制 很 可 能 会 阻止 代码 的 运行 (因为 这 
时 是 使 用 file: // 协 议 查看 计算 机 上 的 文件 )。 









































10.8 在 一 个 cookie 里 设置 多 个 值 


每 个 cookie 包 含 一 对 “name=value”， 如 果 需 要 保存 多 个 数据 ， 比 如 





























用 户 的 姓名 、 年 龄 和 会 员 号 ， 就 需要 三 个 不 同 的 cookie。 






































然而 ， 稍 微 动 一 点 脑筋 ， 就 可 以 用 一 个 cookie 保 存 这 三 个 值 。 方 法 

















是 把 需要 的 值 组 成 一 个 字符 串 ， 让 它 成 为 要 保存 在 cookie 里 的 值 。 













































































通过 这 种 方式 ， 可 以 避免 使 用 三 个 单独 的 cookie， 而 是 只 用 


=A 























保存 这 三 部 分 数据 。 为 了 以 后 分 解 其 中 的 信息 在 这 个 字符 











寺 殊 字符 (所 谓 的 “ 定 界 符 ”) 来 分 隔 不 同 的 数据 : 





串 里 放置 











var userdata = "Sandyl26lA23679" ; 
createCookie("user", userdata) ; 
































到 各 部 分 数据 
var myUser = getCookie("user") ; 








更 用 “|* 作 为 定 界 符 。 稍 后 需要 读 取 cookie 值 时 ， 可 以 依据 它 得 


var myUserArray = myUser.split('l'); 


var name = myUserArray[Q]; 
var age = myUserArray[1]; 
var memNo = myUserArray[2]; 











有 些 浏览 器 要 求 cookie 的 数量 不 能 超过 20， 如 果 用 一 个 cookiefi fs 






































多 个 数值 ， 可 以 在 一 定 程 度 上 打破 这 种 限制 。 但 是 ，cookie 信 息 
能 超过 4 KB 是 不 能 改变 的 。 
说 明 : 


关于 序列 化 的 详细 介绍 请 见 第 8 章 。 


总 体 不 


10.9 小结 


本 章 介 绍 了 什么 是 cookie, L 





及 使 














除 它们 ， 包 括 如 何在 一 个 cookie 征 





有 保存 





























jJavaScript 如 何 设置 、 




















个 值 。 


获取 和 删 

























































































































































































































































































10.10 fF 

H: 在 使 用 一 个 cookie 保 存 多 个 值 时 ， 能 否 使 用 任意 字符 作为 定 
界 符 ? 

答 : 不 能 使 用 可 能 出 现在 编码 数 里 的 字符 (除非 那个 字符 也 当 
作 定 界 符 ) ， 也 能 使 用 等 号 (=) 或 分 号 0;) ， 因 为 它们 用 于 组 
成 “hame=value” 和 分 隔 多 对 数据 。 男 外 ，cookie 一 般 不 能 包含 空白 和 去 
号 ， 所 以 它们 也 不 能 当 作 分 界 符 。 

问 : cookie 安 全 吗 ? 

答 : cookie 的 安全 问题 经 常会 被 提 及 ， 但 这 种 担心 大 多 是 没有 根据 
的 。cookie 能 够 帮助 站 长 和 广告 商 追 踪 用 户 的 浏览 习惯 ， 他 们 可 以 (也 
的 确 ) 利用 这 些 信 息 在 用 户 访问 的 页 面 上 有 目的 地 投放 广告 和 提示 信 
息 。 但 是 ， 只 使 用 cookie， 他 们 不 能 获得 用 户 的 个 人 信息 ， 也 不 能 访问 
用 户 计算 机 硬盘 上 的 其 他 内 容 。 












































10.11 作业 
请 先 回答 问题 ， 再 参考 后 面 的 答案 。 




















10.11.1 测验 











1. cookie 是 少量 的 文本 信息 ， 保 存在 : 
a. 用 户 的 硬盘 上 
b. 服务 器 上 
c. 用 户 的 互联 网 服务 供应 商 

2. 为 了 确保 cookie 里 不 包含 非法 字符 而 对 字符 串 进行 编码 ， 可 以 使 



















































































a. escape() 


b. unescape() 























c. split() 

3. 在 一 个 cookie 里 分 隔 多 个 值 的 字符 被 称 为 : 
a. 转 义 序列 
b. 定 界 符 
ce 分 号 


10.11.2 ”答案 











1. 选 a。cookie 保 存在 用 户 的 硬盘 上 。 


2. 选 a。 使 用 escape() 函 数 可 以 对 要 保存 在 cookie 里 的 字符 串 进行 编 
15. 







































































3. 选 bp。 分 隔 多 个 值 的 字符 被 称 为 " 定 界 符 ”。 


10.12 练习 


了 解 如 何在 常用 的 浏览 器 里 查看 cookie 信 息 ， 然 后 查看 程序 清单 
10.4 设 置 的 cookie。 










































































修改 cookietest.html 和 cookietest2. html 的 代码 ， 把 多 个 值 写 到 一 个 
cookie, i 把 它们 显示 在 单独 的 


行 里 。 使 用 “#” 作 为 定 界 符 


在 cookietest2.html 里 添加 一 个 按钮 ， 删 除 在 cookietest.html 里 设置 的 
cookie, JF AAUP. (Hea: 让 按钮 调用 deleteCookie()。) 
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11 DOM 


本 章 主 要 内 容 包 括 : 


什么 是 =} ay 点 ” 
不 同类 型 的 节点 
使 用 nodeName、nodeType 和 nodeValue 


E 

















} 
# FA childNodes}% 14 
使 用 getElementsByTagName() 选 择 元 素 
用 Mozilla 的 DOM 查 看 器 




































































象 、 属 性 和 方法 。 


本 章 将 介绍 JavaScript 如 何 与 DOM 直 接 交 互 ， 特 别 是 
法 来 侦 历 DOM， 选 择 代表 页 面 HTML 内 容 的 特定 DOM 对 












































前 面 介绍 过 W3C DOM 的 基本 知识 ， 也 在 范例 里 使 用 了 多 种 DOM 对 


11.1 DOM 节 点 


本 书 第 一 部 分 里 介绍 了 W3C“ 文 档 对 象 模 型 ”(DOM) 是 一 种 由 父 
子 关 系 组 成 的 层次 树 形 结构 ， 构 成 当前 Web 页 面 的 模型 。 通 过 适当 的 方 
我 们 可 以 遍历 DOM 的 任 意 部 分 并 且 获 取 关 于 它 的 数据 。 


DOM 层 级 结构 中 最 顶端 的 对 象 是 window 对 象 ， 而 document 对 象 是 
a a 子 对 象 之 一 。 本 章 及 下 一 章 将 主要 介绍 document 对 象 和 它 的 属性 与 
Fay 






























































































































































先 来 看 看 程序 清单 11.1 所 示 的 一 个 简单 Web 页 面 。 














程序 清单 11.1 一 个 简单 Web 页 面 








<!DOCTYPE html> 
<html> 
<head> 
<title>To-Do List</title> 
</head> 


<body> 
<hi>Things To Do</h1> 
<ol id="toDoList"> 
<li>Mow the lawn</1i> 
<li>Clean the windows</1i> 


<li>Answer your email</1li> 
</ol> 


<p id="toDoNotes">Make sure all these are completed by 8pm so you can 
watch the game on TV!</p> 


</body> 
</html> 

















图 11.1 展 示 了 这 个 页 面 的 内 容 。 
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Things To Do 


1. Mow the lawn 
2. Clean the windows 
3. Answer your email 


Make sure all these are completed by 8pm so you can watch the game on TV! 




















11.1 一 个 简单 的 Web 页 面 


当 页 面 完成 加 载 之 后 ， 浏 览 器 就 具有 了 完整 的 层次 化 的 DOM 来 如 
í 11.2 是 这 种 结构 的 一 个 简化 版 本 。 
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Answer your email 


Clean the windows 


图 11.2 页 面 的 DOM 树 形 模型 





























只 有 当 页 面 完 成 加 载 之 后 ，DOM 才 是 可 用 的 。 在 这 之 前 不 要 执行 关于 DOM 的 语句 ， 否 则 
很 可 能 导致 错误 。 


岗 在 来 看 看 图 11.2 所 示 的 树 形 图 与 程序 清单 11.1 的 代码 有 何 关联 。 


<html> 元 素 包 含 页 面 上 其 他 全 部 标签 。 它 作为 父 元 素 ， 有 两 个 直 
接 子 元 素 ， 分 别 是 <head> 和 <body>。 这 两 人 个 元 素 的 关系 是 兄弟 ， 因为 
它们 具有 同一 个 父 元 素 。 它 们 本 身 也 是 父 元 素 ，<head> 有 一 个 子 元 素 
<title>， 而 <body> 有 三 个 子 元 素 ， 分 别 是 <h1>、<ol> 和 <p>。 在 这 三 个 
兄弟 元 素 里 ， 只 有 <ol> 有 子 元 素 : <li>。 在 图 11.2 里 ， 灰 色 格子 表示 这 
些 元 素 是 包含 文本 的 。 


DOM 就 是 以 这 种 关系 形成 层次 结构 的 ， 其 中 的 交叉 点 和 末端 点 被 
称 为 “节点 ”。 
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11.1.1 节点 类 型 


图 11.2 展 示 了 多 个 “元 素 节 点 ”， rm a 比如 段 
落 元 素 <p>， 还 展示 了 “文本 节点 ”， 代 表 页 面 元 素 里 包含 文本 内 容 。 


| am 






















































































从 存在 方式 来 看 ， 文 本 节点 总 是 

















含 在 元 素 节 点 里 的 ， 





但 不 是 每 个 元 素 节 点 都 包含 文本 































































































节点 

还 有 其 他 一 些 类 型 的 节点 ， 分 别 代表 元 素 属 性 、HTML 注 释 及 其 他 
SR HAMS 很 多 类 型 的 节点 都 能 够 包含 其 他 节点 作为 子 节 

每 种 节点 类 型 都 有 一 个 关联 的 数值 ， 保 存在 属性 nodeType 里 。 其 值 
的 含义 如 表 11.1 所 示 。 

表 11.1 nodeType 值 
nodeType 值 节点 类 型 

1 元 素 

2 属性 

3 文本 〈 包 含 空白 ) 

4 CDATA 区 域 

5 实体 引 

6 实体 

7 执行 指令 

8 HTML 注 释 

9 文档 

10 文档 类 型 (DTD) 














11 文档 片段 





12 标签 



































最 常用 的 节点 类 型 是 1、2 和 3， 也 就 是 页 面 元 素 、 它 们 的 属性 和 包含 的 文本 。 


11.1.2 ”childNodes 属 性 





每 个 节点 都 有 一 个 childNodes 属 性 。 这 个 类 似 数 组 的 属性 包含 了 当 
前 节点 全 部 直接 子 节点 的 集合 ， 让 我 们 可 以 访问 这 些 子 节点 的 信息 。 


childNodes 集 合 被 称 为 “节点 列表 ”， 其 中 的 项 目 以 数值 进行 索引 。 
集合 《在 大 多 数 情况 下 ) 的 表现 类 似 于 数组 ， 我 们 可 以 像 访问 数组 元 素 
样 访问 集合 里 的 项 目 ， 还 可 以 像 对 待 数 组 一 样 遍历 集合 的 内 容 ， 但 有 
些 数 组 方法 是 不 能 用 的 ， 比 如 pushO0 和 popO0。 对 于 本 章 的 全 部 范例 ， 我 
们 可 以 像 对 待 数组 那样 处 理 集合 。 


节点 列表 是 个 动态 集合 ， 这 表示 集合 的 任何 改变 都 会 立即 反映 到 列 



















































































































































































表 。 





使 用 childNodes 属 性 





























利用 childNodes 属 性 返回 的 集合 ， 我 们 可 以 查看 程序 清单 11.1 里 <ol> 元 素 的 内 容 。 编 
写 一 个 简单 的 函数 ， en es 点 ， 并 且 返 回 列表 里 的 总 数 。 


首先 ， 利 用 <ol> 的 id 获取 它 ， 
var olElement = document.getElementById("toDoList"); 
现在 ，<ol> 元 素 的 子 节点 就 包含 在 这 个 对 象 里 了 : 


olElement.childNodes 


于 我 们 只 想 操 作 子 节点 里 的 <li> 元 素 ， 所 以 在 遍历 这 个 集合 时 ， 只 统计 
nodeType==1 (也 就 是 HTML 元 素 ) 的 节点 ， 忽 略 其 他 元 素 〈 比 如 注 FREED) 。 处 理 集 

















































































































合 的 方式 与 数组 很 相似 ， 比 如 这 里 

var count = 0; 

for (var i=0; i < olElement.childNodes.length; i++) { 
if(olElement.childNodes[i].nodeType == 1) count++; 





= 








使 用 length 属 性 : | 


























现在 把 上 述 操 作 放 到 一 个 函数 里 ， 并 且 用 alert 对 话 框 来 输出 结果 。 | 
function countListItems() { 
var olElement = document.getElementById("toDoList") ; 
var count = Q; 
for (var i=0; i < olElement.childNodes.length; i++) { 
if (olElement.childNodes[i].nodeType == 1) count++; 

} 
alert("The ordered list contains " + count + " items"); 


} 
window.onload = countListItems; 





当 浏览 器 加 载 页 面 时 ，HTML 代 码 里 的 空白 〈 比 如 空格 和 制 表 符 ) 一 般 是 被 忽略 的 。 但 是 ， ee 
| 里 存在 的 空白 ， 比 如 有 序列 表 <ol> 里 的 空 eee ee (nodeType==3) 。 
样 一 来 ， 仅 使 用 childNodes.length 未 必 能 得 到 期 望 的 结 


在 文本 编辑 器 里 新 建 一 个 HTML 页 面 ， 输 入 程序 清单 11.1 的 代码 ， 在 页 面 的 <head> 部 
分 输入 上 述 JavaScript 代 码 ， 然 后 在 浏览 器 里 加 载 页 面 。 


11.3 展 示 了 浏览 器 加 载 页 面 后 的 结果 。 
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The ordered list contains 3 items 


(icc) 








图 11.3 ”使 用 childNodes 属 性 








11.1.3 firstChild 和 lastChild 
在 childNodes 数 组 里 选择 第 一 个 和 最 后 一 个 元 素 是 有 快捷 方式 的 。 


firstChild 显 然 就 是 childNodes 数 组 里 的 第 一 个 元 素 ， 相 当 寺 
childNodes[0]。 


利用 lastChild 可 以 访问 
就 只 能 像 下 面 这 样 了 : 


var lastChildNode = myElement.childNodes[myElement.childNodes.length 
=- 1]; 


这 显然 有 些 复杂 ， 使 用 lastChild 就 很 简单 了 : 
var lastChildNode = myElement.lastChild; 
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合 的 最 后 一 个 元 素 ， 这 是 很 方便 的 ， 不 然 


ae 























11.1.4 parentNode 属 性 
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性 保存 节点 的 父 节 点 。 在 前 例 中 ， 我 们 使 用 了 

var lastChildNode myElement.lastChild; 
而 使 用 parentNode 可 以 在 树 形 结构 中 向 上 一 级 ， 比 如 : 

var parentElement = lastChildNode.parentNode; 








显然 ，parentNode 属 
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将 返回 lastChildNode 的 父 节 点 ， 当 然 就 是 对 象 myElement。 





11.1.5 nextSibling 和 previousSibling 


兄弟 节点 是 指 具 有 相同 父 节点 的 那些 节点 。previousSibling 和 
a et i ale ig 个 兄弟 节点 ， 如 果 不 存在 
相应 的 节点 ， 就 返回 null。 
var olElement = document.getElementById("toDoList"); 
var firstOne = olElement.firstChild; 
var nextOne = firstOne.nextSibling; 


















































有 些 浏览 器 会 把 HTML 里 的 空白 创建 为 DOM 里 的 文本 节点 ， 所 以 DOM 里 的 兄弟 节点 有 时 
比 我 们 想象 的 要 多 。 


11.1.6 ”节点 值 






























































































































































DOM 节 点 的 nodeValue 属 性 返回 保存 在 节点 里 的 值 ， 我 们 一 般 用 它 
返回 文本 节点 里 的 内 容 。 

从 前 面 统计 列表 项 目 数量 的 范例 出 发 ， 获 取 <p> 元 素 里 包含 的 文 
本 。 为 此 ， 我 们 需要 访问 相应 的 <p> 节 点 ， 找 到 它 包含 的 文本 节点 ， 再 
利用 nodeValue 属 性 返回 其 中 的 信息 : 
























































var text = ''; 
var pElement = document.getElementById("toDoNotes"); 
for (var i=0; i < pElement.childNodes.length; i++) { 
if (pElement.childNodes[i].nodeType == 3) { 
text += pElement.childNodes[i] .nodeValue; 
}; 
} 
alert("The paragraph says:\n\n" + text ); 


11.1.7 节点 名 称 

















nodeName 属 性 以 字符 串 形式 返回 节点 的 名 称 。 这 个 属性 是 只 读 
的 ， 不 能 修改 它 的 值 。 表 11.2 列 出 了 nodeName 可 能 返回 的 值 。 


表 11.2 nodeName 属 性 的 返回 值 












































nodeType 值 节点 类 型 nodeName 值 
1 元 素 TER (标签 ) 名 称 
2 属性 属性 名 称 
3 文本 字符 串 “#text” 









































当 nodeName 返 回 元 素 名 称 时 ， 并 不 包括 HTML 源 代码 里 使 用 的 尖 括 


号 < >。 























var pElement=document.getElementById("toDoNotes") ; 
alert(pElement.nodeName); // 显 示 "P" 











11.2 F] getElementsByTagName()i% 4% 70 A 


前 面 介绍 过 利用 document 对 象 的 getElementById() 方 法 访问 页 面 里 ; 
元 素 。document 的 另 一 个 方法 getElementsByTagName 可 以 获取 特定 
部 标签 ， 保 存在 一 个 数组 里 。 














cay 























i> 





























请 注意 方法 名 称 的 拼写 。getElementsByTagName 里 是 复数 的 Elements， 而 getElementById 
里 是 单数 的 Element。 


这 个 方法 也 接收 一 个 参数 ， 也 就 是 指定 标签 的 名 称 。 


举例 来 说 ， 假 设 我 们 要 访问 特定 文档 里 的 全 部 <div> 元 素 ， 可 以 像 
下 面 这 样 获得 它们 的 集合 : 


var myDivs = document.getElementsByTagName("div"); 
这 个 方法 不 是 必须 用 于 整个 文档 的 ， 而 是 可 以 用 于 任何 对 象 ， 就 会 














































































































返回 该 对 象 包含 的 指定 标签 的 全 部 集合 。 
即使 具有 特定 标签 名 称 的 元 素 只 有 一 个 ，getElementsByTagName 仍 然 返 回 一 个 集合 ， 其 
中 只 包含 一 个 元 素 。 
实践 


使 用 getElementsByTagName() 


前 面 曾经 写 过 一 个 函数 来 统计 <ol> 元 素 里 的 <li> 元 素 : 








function countListItems() { 
var olElement = document.getElementById("toDoList"); 
var count = 0; 
for (var i=@; i < olElement.childNodes.length; i++) { 

if (olElement.childNodes[i].nodeType == 1) count++; 

} 

alert("The ordered list contains " + count + " items"); 

} 








这 个 函数 使 用 childNodes 数 组 获得 全 部 子 节点 ， 然 后 选择 “nodeType==1” 的 元 素 。 
利用 getElementsByTagName 也 可 以 轻松 地 实现 上 述 功能 。 
首先 用 相同 的 方式 根据 id 选择 <ol> 元 素 : 

var olElement = document.getElementById("toDoList") | 


然后 创建 一 个 数组 listItems， 把 olElement 里 的 全 部 <li> 元 素 赋 予 它 : 


















































var listItems = olElement.getElementsByTagName("1li"); 
剩 下 的 工作 就 是 显示 数组 里 有 多 少 个 元 素 了 : 
alert("The ordered list contains " + listItems.length + " items"); 
程序 清单 11.2 是 这 个 页 面 的 完成 代码 ， 包 括 修改 过 的 函数 countListItems()。 


程序 清单 11.2 ”使 用 getElementsByTagName() 






































<!DOCTYPE html> 
<html> 
<head> 
<title>To-Do List</title> 
<script> 
function countListItems() { 
var olElement = document.getElementById("toDoList") ; 
var listItems = olElement.getElementsByTagName("1li"); 
alert("The ordered list contains " + listItems.length + " 
items") ; 
} 
window.onload = countListItems; 
</script> 
</head> 
<body> 
<hi>Things To Do</h1> 
<ol id="toDoList"> 
<1i>Mow the lawn</1i> 
<li>Clean the windows</1i> 
<li>Answer your email</1li> 
</ol> 
<p id="toDoNotes">Make sure all these are completed by 8pm so you can 
watch the game on TV!</p> 












































</body> 
</html> 

把 这 段 代码 保存 为 HTML 文 档 ， 用 浏览 器 加 载 ， 其 结果 与 前 面 的 图 11.3 一 样 。 
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另外 一 个 获得 元 素 集合 的 常用 方法 是 





document .getElementsByClassName() 




















有 从 这 个 方法 的 名 称 就 可 以 看 出 ， 它 返回 的 元 素 集合 具有 特定 的 class 属 性 值 。 但 是 ，IE 9 不 支持 这 个 方法 。 














11.3” 读 取 元 素 的 属性 



































HTML 元 素 通 常会 具有 一 些 属性 ， 保 存 着 相关 的 











<div id="id1" title="report">Here is so 








言 息 : 


me text.</div> 





























属性 通常 被 放置 在 标签 的 前 半 部 分 ， 其 形式 












































身 是 所 在 元 素 的 子 节 点 ， 如 图 11.4 所 示 。 





| div 








id = “id 1” | 








title = “report’ 





Here is some text. 








图 11.4 





属性 节点 

















性 值 : 


在 获得 了 目标 元 素 之 后 ， 就 可 以 利 

















jgetAttribute() 方 法 读 取 它 的 属 








“属性 = 值 ”。 属 性 本 


element 


attribute 


attribute 


text 











var myNode = document.getElementById("idi"); 
alert(myNode.getAttribute("title")); 


























XITA EalertX ite He “report”. WA 








尝试 访问 不 存在 的 























属性 ，getAttribute(0) 会 返回 null。 利 











这 个 特性 可 以 检测 属性 节点 是 否 存 








在 : 











if (myNode.getAttribute("title")){ 
-执行 操作 











| 





UK 


于 JavaScript 把 null 解 释 为 相当 于 false 的 值 ， 所 以 只 有 
getAttribute() 返 回 非 null 值 时 ， 才 满足 站 语句 的 条 件 。 






























































还 有 一 个 attributes 属 性 ， 以 数组 形式 包含 节点 的 全 部 属性 。 从 理论 上 讲 ， 按 照 属性 在 
HITML 人 代码 里 出 现 的 次 序 就 可 以 访问 以 “名 称 = 值 " 形 式 表 示 的 属性 了 ， 比 如 attributes[0].name 应 
该 就 是 id，attributes[1].value 就 是 "report"。 然 而 ， 这 个 属性 在 正和 某 些 版 本 的 Firefox 里 是 有 问 
题 的 ， 所 以 使 用 getAttribute() 是 更 稳妥 的 方式 。 
































11.4 Mozilla 的 DOM 查 看 器 


























， 查 看 节点 信息 的 最 简便 方法 之 是 使 用 




















。 从 Firefox 3 


始 ， 

















Mozilla Firefox 的 “DOM 查 看 
它 就 作为 一 个 单独 的 插件 可 以 下 载 和 安装 了 


ee ee a a Ja 








在 Firefox 里 按 Ctrl+Shift+I 组 合 键 就 

















可 以 打 





DOM 查 看 器 。 














图 11.5 就 











显示 了 程序 清单 11.1 生 成 的 Web 页 面 的 DOM 结 构 。 
To-Do List -DOM Inspector a- +x 
File Edit View Help 
q i | file yhome/philSAMS/1 1istingo 1.html Inspect 
v Document - DOM Nodes ~ v Object -DOM Node ~ 
| nodeName | localName | nodeīype | nodeValue lid LIB Local Name: 
9 ~ 
ee a Namespace URI: 
html 
GETM html i Node Type: Document 
HEAD head it 
text 3 
TITLE title 1 | 
‘text 3 To-Do List = 
#text 3 | 
pHtext 3 
“BODY body il | 
text 3 
vH1 hl 1 | 
‘text 3 Things To Do 
#text a 
voL ol 1 toDoList 
btext 3 
vu li 1 
#text 3 Mow the lawn 
text 3 









































411.5 ” Mozilla 的 DOM 查 看 器 




















在 左 侧 窗 格 里 选择 
BMH. READOMI EK 
则 、 层 又 样式 表 、 计 算 档 







































































个 DOM 节 点 ， 它 的 详细 情况 就 会 显示 在 右 侧 
工具 外 ， 还 有 其 他 一 些 工具 用 于 查看 CSS 规 
f 式 、JavaScript 对 象 等 。 

这 些 内 容 初 次 看 上 去 有 些 令 人 费解 ， 但 的 确 值 得 深入 研究 一 下 。 














11.5 小结 


本 章 介绍 了 什么 是 节点 ， 如 何 使 用 ei 点 相关 的 方法 遍历 DOM， 
还 介绍 了 使 用 Mozilla 的 DOM 查 看 器 了 解 页 面 的 DOM 结 构 。 



















































































H: 是 否 有 简便 的 方法 判断 一 个 节点 是 否 有 子 节点 ? 




















































































































答 : 有 ， 可 [以 使 用 nasChildNodes() 方 法 。 它 返 回 一 个 布尔 值 ，true 
Fn H 个 或 多 个 子 节点 ，false 表 示 没 有 。 需 要 说 明 的 是 ， 属 性 
节点 和 文本 节点 是 不 能 有 子 节点 的 ， 所 以 hasChildNodes() 方 法 应 用 于 它 











们 时 总 会 返回 false。 












































H: Mozilla 的 DOM 查 看 器 是 唯一 的 工具 吗 ? 


答 : 当然 不 是 ， 几 乎 每 种 浏览 器 在 开发 者 工具 里 都 内 置 了 DOM 碍 


看 器 ， 有 些 在 第 6 章 的 内 容 里 介绍 过 。 当 然 ，Mozilla 的 DOM 查 看 器 以 一 


种 特别 清晰 的 方式 展示 J DOM 层 次 和 每 个 节 点 的 参数 ， 所 以 本 书 特别 
提 及 了 它 。 

















































































































11.7 作业 


请 先 回答 问题 ， 再 参考 后 面 的 答案 。 





























11.7.1 测验 


1. 下面 哪个 选项 不 是 节点 类 型 ? 











a. 元 素 
b. 属性 
c. 数组 





2. getElementsByTagName() 方 法 返回 : 
a. 元 素 对 象 的 集合 
b. nodeTypefi 4 
c. 标签 名 称 的 集合 

3. 对 于 某 些 浏览 器 来 说 ， 页 面 里 的 空白 可 能 
a. 文本 节点 








a 
=] 


aur 
































np 








导致 创建 : 





b. JavaScript 错 误 








al 


性 节点 








Ci 
11.7.2 答案 
1. 选 c。 数 组 并 不 是 什么 
2. 选 a。 这 个 方法 返回 元 素 对 象 的 集合 。 
3. 选 a。 元 素 内 部 的 空白 



























































11.8 ”练习 
































利用 表 11.1 里 的 nodeType 人 信息， 编写 一 个 函数 ， 获 取 页 面 <body> 区 
个 字符 串 。 给 程序 清单 11.2 的 代 
码 里 添加 一 些 注释 ， 然 后 测试 一 下 新 函数 的 功能 。 


如 果 在 使 用 Firefox， 请 下 载 并 安装 DOM 查 看 器 ， 熟 悉 它 的 界面 ， 
并 利用 它 查 看 一 些 常 用 的 Web 页 面 。 

































































































































































第 12 章 ”使 用 脚本 操作 DOM 


添加 、 编辑 、 删除 子 节点 
动态 加 载 JavaScript 文 件 





e © o oè 
Sor 























前 一 章 介 绍 了 如 何人 遍历 DOM 树 选择 特定 节点 (或 节点 集合 ) ， 如 
何 查 看 它们 的 属性 。 


我 们 不 仅 可 以 从 DOM 读 取信 息 ， 还 可 以 利用 DOM 的 方法 改变 页 
a 只 要 改变 了 文档 相应 的 DOM， 也 就 改变 了 文档 在 浏览 器 窗口 里 的 
现 。 

























































































本 章 将 介绍 如 何 创 建新 元 素 ， 如 何在 DOM 树 里 添加 、 编 辑 和 删除 
子 节 点 ， 以 及 如 何 编辑 元 素 的 属性 。 






































12.1 创建 节点 
给 DOM 树 添加 新 节点 需要 两 个 步骤 。 


首先 是 创建 一 个 新 节点 。 节 点 创建 之 后 是 处 于 某 种 “不 确定 状态 ”， 
已 的 确 存在 ， 但 不 属于 DOM 树 的 任何 位 置 ， 也 就 不 会 出 现在 浏览 器 窗 
















































































点 添加 到 DOM 树 的 指定 位 置 ， 它 就 成 为 页 面 的 组 成 部 
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在 使 用 本 章 介绍 的 方法 修改 DOM 时 ， 也 就 修改 了 页 面 在 浏览 器 里 的 显示 。 但 要 记 住 的 
= 这 样 并 不 会 修改 文档 本 身 。 如 果 让 浏览 器 显示 页 面 的 源 代码 ， 就 会 发 现 没有 任何 的 改 
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这 是 因为 浏览 器 显示 的 是 文档 当前 的 DOM 表 现 ， 修 改 DOM 只 是 修改 屏幕 上 的 显示 。 


下 面 来 介绍 document 对 象 用 于 创建 节点 的 一 些 方法 。 






































12.1.1 createElement() 











createElement() 方 法 可 以 新 建 任何 类 型 的 标准 HTML 元 素 ， 比 如 有 段 
落 、 区 间 、 表格 、 BRA NAF o 


段 设 我 们 要 新 建 一 个 <div> 元 素 ， 为 此 ， 只 需要 把 相关 的 节点 名 称 
(也 就 是 “div”) 传递 给 createElement 方 法 : 
































var newDiv = document.createElement("div"); 


新 的 <div> 元 素 就 存在 了 ， 但 目前 还 没有 内 容 ， 没 有 属性 ， 在 DOM 
树 里 也 没有 位 置 。 稍 后 就 会 介绍 如 何 解决 这 些 问 题 





















































12.1.2 createTextNode() 















































页 fl HEF 了 很 多 HTML 元素 需要 文本 BOA, 这 就 需 使 
createTextNode() 方 法 。 它 的 工作 方式 类 似 于 createElement()， 但 它 的 参 












































数 不 是 nodeName， 而 是 元 素 需 要 的 文本 内 容 : 


var newTextNode = document.createTextNode("Here is some text content."); 











与 createElement() 的 结果 一 样 ， 新 建 节 点 还 没有 放置 到 DOM 树 。 
































12.1.3 cloneNode() 


重复 劳动 是 最 没有 意义 的 ， 如 果 文 档 中 己 有 的 节点 与 需要 新 建 的 节 
点 很 相像 ， 就 可 以 使 用 cloneNode() 来 新 建 节点 。 


这 个 方法 以 一 个 布尔 值 作为 参数 。 当 参数 为 tue 时 ， 表 示 不 仅 要 复 
制 节点 ， 还 要 复制 它 的 全 部 子 节点 : 


var myDiv = document.getElementById("id1"); 
var newDiv = myDiv.cloneNode(true); 


上 述 代码 让 JavaScript 复 制 了 元 素 及 其 子 节 点 ， 这 样 myDiv 里 的 文本 
(保存 在 元 素 的 文本 子 节点 里 ) 就 会 完整 地 复制 到 新 的 <div> 元 素 。 


如 果 是 下 面 这 样 的 代码 ; 
var newDiv = myDiv.cloneNode(false) ; 
























































































































































新 建 的 <div> 元 素 与 原始 元 素 相同 ， 但 是 没有 子 节点 。 它 会 具有 
样 的 属性 《当然 ， 前 提 是 原始 节点 的 类 型 是 元 素 节 点 ) 。 


这 个 方法 创建 的 节点 也 是 没有 放置 到 DOM 树 的 。 
接 下 来 就 介绍 如 何 把 新 建 节点 添加 到 DOM 树 。 







































































12.2 RETTA 


前 面 新 建 的 节点 不 在 DOM 树 的 任何 位 置 ， 因 此 并 没有 什么 实际 意 
document 对 象 具 有 一 些 特定 的 方法 ， 专 门 用 于 在 DOM 树 里 放置 节 


Fi 








































































































12.2.1 appendChild() 


把 新 节点 添加 到 DOM 树 的 最 简单 方法 也 许 就 是 把 它 作为 现 有 节点 
的 一 个 子 节点 。 这 只 需要 获取 父 节 点 ， 然 后 调用 appendChild() 方 法 : 


var newText = document.createTextNode("Here is some text content."); 
var myDiv = document.getElementById("id1"); 
myDiv.appendChild(newText) ; 


这 段 代 码 新 建 一 个 文本 节点 ， 并 且 把 它 添 加 为 现 有 <div> 元 素 〈id 为 
idl) 的 子 节点 。 
[提示 : ] 


appendChild() 方 法 总 是 在 现 有 最 后 一 个 子 节点 之 后 添加 子 节点 ， 所 以 新 添加 的 节点 会 成 为 
父 节 点 的 lastChild。 


appendChild0 方 法 不 仅 可 以 用 于 文本 节点 ， 而 是 可 以 用 于 各 种 类 型 
的 节点 。 比 如 可 以 在 父 <div> 元 素 里 新 添 一 个 <div> 元 素 : 





















































































































































var newDiv = document.createElement("div"); 
var myDiv = document.getElementById("idi"); 
myDiv.appendChild(newDiv) ; 
上 述 代码 执行 后 ， 现 有 <div> 元 素 就 包含 了 一 个 <div> 元 素 作 为 其 子 
点 。 如 果 父 <div> 元 素 已 经 具有 文本 子 节 点 形式 的 文本 内 容 ， 那 么 它 
的 形式 会 是 这 样 的 (在 修改 过 后 的 DOM 里 ， 而 不 是 在 源 代码 里 ): 

























































































<div id="id1"> 
包含 在 文本 节点 里 的 原始 内 容 
<div></div> 

</div> 








12.2.2 insertBefore() 
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appendChild0 总 是 把 新 的 子 节点 添加 到 子 节点 列表 的 
insertBefore() 方 法 可 以 指定 一 个 子 节 点 ， 然 后 把 新 节点 插入 到 它 前 面 。 


这 个 方法 有 两 个 参数 : 要 插入 的 新 节点 、 指 示 插 入 位 置 的 节点 ( 插 
入 到 这 个 节点 前 面 )。 假 设 页 面包 含 如 下 HTML 代 码 : 
<div id="id1"> 
<p id="para1">This paragraph contains some text.</p> 
<p id="para2">Here's some more text.</p> 
</div> 


如 果 要 在 现 有 两 个 段落 之 间 插 入 一 个 新 段落 ， 首 先 要 新 建 一 个 段 























































































































落 : 
var newPara = document.createElement("p"); 
获取 父 节点 及 子 节 点 ， 新 节点 将 插入 到 这 个 子 节点 之 前 : 


var myDiv = document.getElementById("idi"); 
var para2 = document.getElementById("para2") ; 


然后 把 两 个 参数 传递 给 insertBefore() 方 法 : 
myDiv.insertBefore(newPara, para2); 














12.2.3 replaceChild() 














replaceChild() 方 法 可 以 把 父 元 素 现 有 的 一 个 子 节点 替换 为 另 一 个 节 
点 。 它 有 两 个 参数 ， 一 个 是 新 的 子 节点 ， 一 个 是 现 有 子 节点 。 






































实践 
蔡 换 子 节点 


查看 程序 清单 12.1 的 代码 。 





程序 清单 12.1 BATEA 





<!DOCTYPE html> 
<html> 
<head> 
<title>Replace Page Element</title> 
</head> 
<body> 
<div id="id1"> 
<p id="para1">Welcome to my web page.</p> 
<p id="para2">Please take a look around.</p> 
<input id="btn" value="Replace Element" type="button" /> 
</div> 
</body> 
</html> 


现在 我 们 利用 DOM 把 <div> 里 的 第 一 段 蔡 换 为 <h2> 标 题 ， 如 下 所 示 : 























<h2>Welcome!</h2> 
首先 创建 代表 <h2> 标 题 的 新 节点 : 
var newH2 = document.createElement("h2"); 


这 个 新 的 元 素 节点 需要 一 个 文本 子 节点 来 保存 标题 文本 。 既 可 以 现在 就 创建 并 添加 这 
个 文本 节点 ， 也 可 以 在 把 <h2> 元 素 添加 到 DOM 之 后 再 进行 。 我 们 选择 现在 就 做 : 


var newH2Text = document.createTextNode( "Welcome!"); 
newH2.appendChild(newH2Text) ; 


接 下 来 就 用 新 节点 替换 不 需要 的 子 节点 

var myDiv = document.getElementById("id1"); 
var oldP = document.getElementById("parai"); 
myDiv.replaceChild(newH2, oldP); 


最 后 ， 给 按钮 元 素 添加 一 个 onClick 事 件 处 理 器 ， 从 而 在 点 击 按钮 时 运行 函数 实现 节点 
Hie. 


window.onload = function() { 
document .getElementById("btn").onclick = replaceHeading; 












































程序 清单 12.2 展 示 了 添加 JavaScript 代 码 后 的 页 面 文件 。 
程序 清单 12.2 蔡 换 子 节点 的 完整 代码 











<!DOCTYPE html> 


<html> 
<head> 
<title>Replace Page Element</title> 
<script> 
function replaceHeading() { 
var newH2 = document.createElement("h2"); 
var newH2Text = document.createTextNode("Welcome!") 5 
newH2. appendChild(newH2Text) ; 
var myDiv = document.getElementById("id1") ; 
var oldP = document.getElementById("parai") ; 
myDiv.replaceChild(newH2, oldP); 
} 
window.onload = function() { 
document.getElementById("btn").onclick = replaceHeading; 
} 
</script> 
</head> 
<body> 


<div id="id1"> 
<p id="parai1">Welcome to my web page.</p> 
<p id="para2">Please take a look around.</p> 
<input id="btn" value="Replace Element" type="button" /> 
</div> 
</body> 
</html> 
新 建 一 个 HTML 文 档 ， 人 EE 在 浏览 器 里 加 载 页 面 ， 就 会 看 到 两 


行文 本 和 一 个 按钮 。 如 果 一 切 运行 正常 ， 点 点 击 按钮 就 会 把 第 一 个 <p> 元 素 蔡 钦 为 <h2> 标 
题 ， 如 图 12.1 所 示 。 












































/ @ Replace Page Element 
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Welcome to my web page. 


Please take a look around. 


Bape Element Welcome! 


Please take a look around. 





[ Replace Element 








——— 
12.1 元 素 蔡 换 脚本 的 执行 结果 


























12.2.4 removeChild() 
removeChild() 方 法 专门 用 于 从 DOM 树 里 删除 子 节点 。 


仍然 以 程序 清单 12.1 为 例 ， 如 果 想 删除 id 为 para2 的 <p> 元 素 ， 上 
要 这 样 做 : 

var myDiv = document.getElementById("id1"); 
var myPara = document .getElementById("para2"); 
myDiv.removeChild(myPara) ; 
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提示 : 


如 果 不 方便 引用 父 元 素 ， 可 以 利用 元 素 的 parentNode 属 性 : 









































myPara.paraentNode.removeChild(myPara) ; 
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removeChild() 方 法 的 返回 值 是 对 删除 节点 的 一 个 引 
可 以 利用 它 对 删除 的 节点 实现 进一步 操作 : 


var removedItem = myDiv.removeChild(myPara) ; 


alert('Item with id ' + removedItem.getAttribute("id") + ' has been 



































=removed.'); 


12.3 ”编辑 元 素 属 性 


















































前 一 章 介绍 过 使 用 getAttribute() 方 法 读 取 元 素 属性 。 还 有 个 相应 
的 setAttribute() 方 法 可 以 给 元 素 节 点 创建 属性 并 赋值 。 它 有 两 个 参 
































一 个 是 要 添加 的 属性 ， 另 一 个 是 属性 值 。 











x 








下 面 的 代码 给 <p> 元 素 添加 title 属 
paragraph”: 


var myPara = document.getEl 


myPara.setAttribute("title", 
生 的 值 就 会 改变 该 属性 的 值 。 








设置 现 有 属 


























后， 给 它 赋值 <Opening 


ementById("parai"); 
"Opening paragraph"); 





myPara.setAttribute("title","New title") 





var myPara=document.getElementById("paral") ; 
myPara.setAttribute("title","Opening paragraph"); // 设 置 title 属 性 








; ”// 和 覆盖 title 属 性 








12.4 动态 加 载 JavaScript 文 件 


在 有 些 情 况 下 ， 我 们 需要 给 已 经 加 载 的 页 面 随时 加 载 JavaScript 代 
码 ， 为 此 可 以 利用 createElement() 动 态 新 建 <script> 元 素 ， 其 中 包含 需要 
的 代码 ， 然 后 把 这 个 元 素 添加 到 页 面 的 DOM。 


var scr = document.createElement("script"); 
scr.setAttribute("src", "newScript.js"); 
document .head.appendChild(scr); 


由 于 appendChild() 方 法 把 新 节点 添加 到 最 后 一 个 子 节点 之 后 ， 所 以 
新 的 <script> 元 素 会 位 于 页 面 <head> 部 分 的 末尾 。 






























































如 果 以 这 种 方式 动态 加 载 JavaScript 源 文件 ， 在 文件 完成 加 载 之 前 ， 
页 面 不 能 使 用 其 中 包含 的 代码 。 


在 使 用 这 些 额 外 代码 之 前 ， 最 好 先进 行 检测 。 


几乎 全 部 现代 浏览 器 在 脚本 完成 下 载 之 后 都 会 触发 一 个 onload 事 
件 ， 它 与 window.onload 事 件 的 工作 方式 类 似 ， 只 不 过 后 者 是 在 页 面 完成 
| as (本 例 是 JavaScript 源 文件 ) 完整 下 载 
并 可 以 使 用 于 
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scr.onload=function(){ 


-新 代码 加 载 完成 之 后 要 执行 的 操作 .… 

















IE 8 才 开 始 支 持 脚 本 元 素 的 onload 事 件 ， 以 前 版 本 的 下 不 支持 。 为 了 保险 起 见 ， 应 先进 行 
‖ 对象 检测 。 








动态 创建 的 菜单 


























利用 本 章 及 前 面 介绍 的 知识 ， 我 们 来 创建 一 个 动态 页 面 菜单 
范例 中 HTML 页 面 有 一 个 顶端 <h1> 标 题 ， 之 后 是 一 系列 短文 ， 每 篇 短文 由 一 个 <h2> 标 
题 和 一 些 文本 段落 组 成 。 这 种 形式 在 博客 、 新 闻 页 面 、RSS 阅 读 器 等 上 面 是 


很 常见 的 。 
我 们 要 利用 DOM 方 法 在 页 面 <head> 部 分 自动 生成 一 个 菜单 ， 包 含 指向 页 面 上 任意 一 
篇 短文 的 链接 。 相 应 的 HTML 文 件 如 程序 清和 q 


有 12.3 所 示 。 实 际 上 可 以 使 用 任意 的 内 容 和 标 
题 ， 只 要 每 个 区 间 的 标题 包含 在 <h2> 元 素 里 即 可 。 
























































































































































程序 清单 12.3 ”动态 创建 菜单 范例 的 HTML 文 件 





<!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8" /> 

<title>Scripting the DOM</title> 

<script src="menu.js"></script> 

<script>window.onload = makeMenu;</script> 
</head> 
<body> 

<hi>The Extremadura Region of Western Spain</h1> 

<h2>Geography Of The Region</h2> 

<p>The autonomous community of Extremadura is in western Spain 
alongside the Portuguese border. It borders the Spanish regions of 
Castilla y Leon, Castilla La Mancha and Andalucia as well as Portugal (to 
the West). Covering over 40,000 square kilometers it has two provinces: 
Caceres in the North and Badajoz in the South.</p> 

<h2>Where To Stay</h2> 

<p>There is a wide range of accommodation throughout Extremadura 
including small inns and guest houses ('Hostals') or think about renting 
a ‘casa rural' (country house) if you are traveling in a group.</p> 

<h2>Climate</h2> 


<p>Generally Mediterranean, except for the north, where it is | 
continental. Generally known for its extremes, including very hot and dry 
summers with frequent droughts, and its long and mild winters.</p> 

<h2>What To See</h2> 

<p>Extremadura hosts major events all year round including theater, 
music, cinema, literature and folklore. Spectacular venues include 
castles, medieval town squares and historic centers. There are special 
summer theater festivals in the Mérida, Caceres, Alcantara and 
Alburquerque.</p> 

<h2>Gastronomy</h2> 

<p>The quality of Extremaduran food arises from the fine quality of 
the local ingredients. In addition to free-range lamb and beef, fabulous 
cheeses, red and white wines, olive oil, honey and paprika, Extremadura 
is particularly renowned for Iberian ham. The ‘pata negra' (blackfoot) 
pigs are fed on acorns in the cork-oak forests, the key to producing the 
world's best ham and cured sausages. .</p> 
</body> 
</html> 


这 个 页 面 如 图 12.2 所 示 。 
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The Extremadura Region of Western Spain 


Geography Of The Region 


The autonomous community of Extremadura is in western Spain alongside the Portuguese border. It 
borders the Spanish regions of Castilla y Leon, Castilla La Mancha and Andalucia as well as Portugal (to 
the West). Covering over 40,000 square kilometers it has two provinces: Caceres in the North and 
Badajoz in the South. 


Where To Stay 


There is a wide range of accommodation throughout Extremadura including small inns and guesthouses 
(‘Hostals') or think about renting a 'casa rural (country house) if you are travelling in a group. 





Climate a 








图 12.2 准备 创建 动态 菜单 的 页 面 


为 了 创建 动态 菜单 ， 首 先 要 获得 包含 全 部 <h2> 元 素 的 集合 。 它 们 将 作为 菜 生 
目 ， 再 链接 到 每 个 相应 <h2> 元 素 旁 边 的 anchor 元 素 。 
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菜单 里 的 链接 采用 无 序列 表 形式 〈<ul> 元 素 ) ， 它 会 被 放 到 页 面 <head> 部 分 的 一 个 
<div> 容 器 里 。 


首先 ， 获 得 <h2> 元 素 的 集合 : 
var h2s = document.getElementsByTagName("h2"); 
接着 创建 <div> 容 器 来 放置 菜单 ， 其 中 的 <ul> 元 素 用 于 保存 菜单 项 : 
var menu = document.createElement("div"); 
var menuUl = document.createElement("ul"); 
menu.appendChild(menuU1) ; 


然后 是 遍历 <h2> 标 题 的 集合 : 





















































for(var i = @; i < h2s.length; i++) { 


… 对 每 个 标题 的 操作 .…. 
下 











对 于 从 文档 中 找到 的 每 个 标题 ， 需 要 执行 这 样 一 些 操作 ; 
。 获取 标题 文本 子 节点 的 内 容 : 

var itemText = h2s[i].childNodes[0].nodeValue; 
。 为 菜单 新 建 一 个 列表 项 <li>: 
var menuLi = document.createElement("1li"); 
把 这 个 <li> 元 素 添加 到 菜单 ; 


menuut ， appendChild(menuLi) ; 


var EmA = = eent: createElement("a"): 


menuLiA = menuLi.appendChild(menuLiA); 

给 链接 设置 适当 的 href 〈 注 意 在 遍历 数组 的 过 程 中 ， 变 量 ; 的 值 是 不 断 增加 的 ) ， 这 
些 链 接 的 形式 是 : i ; 

<a href="#itemxX">[Title Text]</a> 
其 中 的 X 是 菜单 项 的 索引 值 ; 
menuLiA.setAttribute("href", "#item" + i); 
。 在 每 个 <h2> 标 题 之 前 创建 一 个 相应 的 错 点 元 素 ， 其 形式 是 


<a name= 1temX > 


然后 需要 添加 名 称 属性 ， 并 且 把 链接 指向 相应 标题 的 前 方 : 
var anc = document.createElement("a"); 


anc.setAttribute("name", "item" + i); 
document.body.insertBefore(anc, h2s[i]); 
在 对 每 个 <h2> 标 题 都 完成 了 上 述 操作 之 后 ， 就 可 以 把 新 菜单 添加 到 页 面 了 : 
document.body.insertBefore(menu, document.body.firstChild) ; 
程序 清单 12.4 展 示 了 JavaScript 文 件 menu.js 的 内 容 。 前 面 介绍 的 代码 构成 了 函数 


makeMenu()， 它 会 在 window.onload 事 件 处 理 器 里 被 调用 ， 在 页 面 加 载 完 成 、DOM 可 用 时 
就 会 建立 菜单 。 
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程序 清单 12.4 menu.js 的 JavaScript 代 码 





function makeMenu() { 
// get all the H2 heading elements 
var h2s = document.getElementsByTagName("h2") ; 
// create a new page element for the menu 
var menu = document.createElement("div"); 
// create a UL element and append to the menu div 
var menuUl = document.createElement("ul"); 
menu.appendChild(menuU1) ; 
// cycle through h2 headings 
for(var i = 0; i < h2s.length; i++) { 
// get text node of h2 element 
var itemText = h2s[i].childNodes[Q].nodeValue; 
// add a list item 
var menuLi = document.createElement("1li"); 
// add it to the menu list 
menuUl.appendChild(menuLi) ; 
// the list item contains a link 
var menuLiA = document.createElement("a"); 
menuLiA = menuLi.appendChild(menuLiA) ; 
// set the href of the link 
menuLiA.setAttribute("href", "#item" + i); 
// set the text of the link 
var menuText = document.createTextNode(itemText) ; 
menuLiA.appendChild(menuText) ; 
// create matching anchor element 
var anc = document.createElement("a"); 
anc.setAttribute("name", "item" + i); 
// add anchor before the heading 
document. body.insertBefore(anc, h2s[il); 
} 
// add menu to the top of the page 
document .body.insertBefore(menu, document.body.firstChild) ; 


} 


window.onload = makeMenu; 








图 12.3 展 示 了 脚本 运行 的 结果 。 
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Geography Of The Region 
Where To Stay 

Climate 

What To See 


Gastronomy 


The Extremadura Region of Western Spain 


Geography Of The Region 


The autonomous community of Extremadura is in western Spain alongside the Portuguese border. It 
borders the Spanish regions of Castilla y Leon, Castilla La Mancha and Andalucía as well as Portugal (to 
the West). Covering over 40,000 square kilometers it has two provinces: Caceres in the North and 
Badajoz in the South. 


Where To Stay 

















12.3 ”自动 菜单 脚本 的 运行 结果 


利用 浏览 器 的 DOM 查 看 器 可 以 看 到 页 面 里 添加 的 DOM 元 素 构成 了 菜单 和 锚 点 。 图 
12.4 展 示 了 Google Chromium 的 开发 者 工具 ， 其 中 突出 显示 了 添加 的 元 素 。 
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» <head>. </head> 
¥ <body> 
Ve<div> 
¥ <ul> 
本 <LI> 
<a href="#itemO">Geography Of The Region</a> 
</li> 
ve<li> 
<a href="#iteml">Where To Stay</a> 
</li> 
<li> 
<a href="#item2">Climate</a> 
</li> 
veli> 
<a href="#item3">What To See</a> 
</li> 
了 <LI> 
<a href="#item4">Gast ronomy</a> 
</li> 
</ul> 
</div> 
<hl=The Extremadura Region of Western Spain</hl> 
<a name="itemO"></a> 
<h2>Geography Of The Region</h2> 
¥ <p> 
"The autonomous community of Extremadura is in western § 
border. It borders the Spanish regions of Castilla y Le 
as well as Portugal (to the West). Covering over 40,000 
provinces: Caceres in the North and Badajoz in the Sout 
</p> 
<a name="iteml">=</a> 
<h2=Where To Stay</h2> 














12.4 添加 的 DOM 元 素 








12.5 ”小结 


本 章 介绍 了 如 何 新 建 节点 并 添加 到 DOM， 还 介绍 了 如 何 添加 、 编 
辑 和 删除 DOM 节 点 来 动态 修改 页 面 内 容 。 





























12.6 ”问答 


H: 在 需要 插入 和 获取 HTML 时 ， 使 用 DOM 是 否 比 innerHTML 更 
好 呢 ? 


答 : 每 种 方法 都 有 其 优点 和 缺点 。 在 向 文档 插入 HIML 代 码 时 ， 使 
用 innerHTML 是 更 方便 快捷 的 方法 ， 但 它 不 会 返回 对 插入 内 容 的 引用 ， 
所 以 不 便 对 这 部 分 内 容 继续 进行 操作 。 与 之 相 比 ，DOM 方 法 对 所 操作 
的 页 面 元 素 有 更 精细 的 控制 。 


在 任何 能 够 使 用 innerHTML 的 地 方 ， 都 可 以 使 用 DOM 方 法 得 到 相 
同 的 结果 ， 但 通常 需要 更 多 的 编码 。 




























































































































































































































































































另外 需要 注意 的 是 ，innerHTML 不 是 wW3C 标 准 ， 虽 然 它 目前 得 到 了 
不 错 的 支持 ， 但 不 能 保证 将 来 也 是 这 样 。 

H: 我 在 Web 上 看 到 关于 DOM Core 和 HTML DOM 的 介绍 ， 它 们 
是 什么 ? 有 什么 区 别 ? 


























Z: DOM Core 描 述 了 DOM 方 法 的 核心 基础 部 分 ， 这 些 方法 不 仅 能 
够 适用 于 HTML 页 面 ， 还 适用 于 其 他 标签 语言 〈 比 如 XML ) 构成 的 页 
Ho HTML DOM 包 含 更 多 只 适用 于 HTML 页面 的 方法 ， 这 些 方 法 的 确 
提供 了 完成 某 些 任务 的 简便 方法 ， 但 牺牲 了 代码 对 于 非 HTML 应 用 的 可 
移植 性 。 

本 书 的 范例 一 般 使 用 DOM Core 标 准 的 方法 ， 比 如 程序 清单 12.4 里 
这 样 的 语句 : 


menuLiA.setAttribute("href", "#item" + i); 


如 果 使 用 HTML DOM 标 准 的 语句 ， 可 以 写成 更 简短 的 方式 : 


menuLiA.href = "#item" + i; 
























































































































































































































































12.7 作业 
请 先 回答 问题 ， 再 参考 后 面 的 答案 。 

















12.7.1 测验 




















1. 为 了 新 建 <span> 元 素 ， 应 该 使 用 : 
a. document.createElement("span"); 
b. document.createElement(span); 


c. document.appendChild("span"); 


2. 为 了 复制 节点 时 包含 其 所 有 的 子 节点 ， 应 该 使 用 : 






































a. cloneNode(false); 
b. copyNode(); 


c. cloneNode(true); 



































a. setAttribute(alt, "Company Logo"); 
b. setAttribute("alt", "Company Logo"); 


c. setAttribute(alt="Company Logo"); 
12.7.2 ”答案 
1. ida. 
2. 选 c。 


3. 为 了 把 <ima> 元 素 的 alt 属 性 设置 为 “Company Logo”， 应 该 使 





3. Vb. 


12.8 ”练习 


本 章 介 绍 了 insertBefore() 方 法 ， 是 不 是 有 人 会 觉得 相应 地 应 该 有 
insertAfterQ WIFE? 但 事实 上 的 确 没 有 这 个 方法 。 可 以 尝试 编写 一 个 
insertAfter() 方 法 ， 使 用 与 insertBefore() 类 似 的 参数 ， 也 就 是 一 个 插入 节 
点 ， 一 个 目标 节点 。 GER: 使 用 insertBefore() 方 法 和 nextSibling 属 
性 。) 


在 使 用 程序 清单 12.4 生 成 的 菜单 时 ， 点 击 其 中 一 个 菜单 项 ， 页 面 就 
会 跳 转 到 相应 的 内 容 ， 但 为 了 返回 菜单 ， 需 户 自 己 手工 滚动 页 面 。 


尝试 修改 代码 ， 人 可 到 顶部 ”的 链接 。〈 提 
ZN: 不 需要 添 加 新 链接 ， JN EE 从 每 个 锚 点 添加 一 个 href 和 一 些 链接 文 
本 。) 
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%13% JavaScript 和 CSS 

































































本 章 主要 内 容 包 括 : 
。 内 容 与 样式 分 离 
。 DOM 的 style 属 性 
。 获取 样式 
。 设置 样式 
。 利用 className 访 问 类 
e DOM 的 style Sheets 对 象 
。 在 JavaScript 里 启用 、 禁 用 和 切换 样式 表 
。 改变 鼠标 指针 
早期 的 互联 网 页 面 都 是 文本 内 容 ， 同 期 的 浏览 器 对 于 图 形 效 果 的 支 
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持 也 很 原始 ， 有 些 甚至 根本 不 支持 图 形 。 当 时 所 谓 的 设置 页 面 样式 就 是 
使 用 少量 与 样式 相关 的 属性 和 标签 。 


浏览 器 对 “ 层 县 样式 表 ”(《CSS) 的 支持 大 大 改变 了 这 种 情况 ， 它 实 
现 了 页 面 样式 与 HTML 标 签 的 分 离 。 













































































前 面 的 章节 介绍 了 如 何 利 用 JavaScript 的 DOM 方 法 编辑 页 面 的 结 
构 。 不 仅 如 此 ， JavaScript 还 可 以 访 问 和 修改 当前 页 面 的 CSS 样 式 。 








13.1 CSS 简介 


对 于 要 学 习 JavaScript 编 程 的 人 来 说 ， 很 可 能 已 经 熟悉 CSS 了 ， 在 此 
我 们 只 是 简单 回顾 一 下 基本 知识 。 


13.1.1 ”从 内 容 分 离 样式 

在 CSS 出 现 之 前 ，HTML 页 面 的 大 多 数 样式 是 由 HTML 标 签 及 其 属 
性 实现 的 。 比 如 ， 为 了 设置 一 段 文本 的 前 景 颜色 ， 会 使 用 类 似 这 样 的 代 
13: 


<p><font color="red">This text is in red!</font></p> 
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这 种 方式 有 不 少 问题 : 


页 面 里 每 段 想 设置 为 红色 的 文本 都 需要 使 用 这 些 额 外 的 标签 。 
。 建立 的 样式 不 能 用 于 其 他 页 面 ， 其 他 页 面 还 需要 使 用 额外 的 
HTML. 
s 如 果 想 修改 页 面 的 样式 ， Fe eS TT 审查 HTML 代 码 ， 逐 
个 修改 所 有 与 样式 相关 的 标签 与 属性 。 
。 由 于 这 些 额 外 的 标签 ， HTML 变 得 难以 阅读 与 维护 。 


CSS 致 力 于 把 HTML 的 样式 与 其 标签 功能 分 离 ， 方 法 是 定义 单独 
的 “样式 声明 ”， 然 后 把 它们 应 于 HTML 元 素 或 元 素 的 EG. 


CSS 可 以 设置 页 面 元 素 可 视 属性 的 样式 〈 比 如 颜色 、 字 体 和 大 小 ) 
以 及 与 格式 有 关 的 属性 (比如 位 置 、 页 边 距 、 填充 和 对 齐 ) 。 


样式 与 内 容 分 离 会 带 来 这 样 一 些 好 处 ; 


。 TE AREAN 于 多 个 元 素 甚 至 是 多 个 页 面 ( 使 用 外 部 样式 
do 
。 修改 样式 声明 就 可 以 影响 全 部 相关 的 HTML 元 素 ， 使 更 新 站 点 样式 
更 加 准确 、 迅 速 和 高 效 。 
。 共用 样式 能 够 提高 站 点 的 样式 一 致 性 。 
。HTML 标 签 更 加 清晰 。 易 读 和 维护 。 

















































































































































































































































































































































































































13.1.2 ”CSS 样式 声明 


CSS 样 式 声 明 的 语法 SiJavaScripteA 数 可 不 太一 样 。 假 设 我 们 要 给 页 
里 全 部 段落 元 素 声 明 一 个 样式 ， 设 置 段 沙里 的 体 颜 色 是 红色 : 


p 1 

























































































color: red 





























对 于 指定 元 素 或 元 素 集合 可 以 应 用 多 个 样式 规则 ， 这 些 规则 之 间 以 
分 号 G) 分 隔 : 


p { 








color: red; 
text-decoration: italic 




















于 使 用 了 选择 符 p， 前 面 这 个 样式 声明 会 影响 页 面 上 每 个 段落 元 
素 。 如 果 想 选择 某 个 特定 页 面 元 素 ， 可 以 利用 它 的 id。 在 这 种 情况 下 ， 
CSS 样 式 声明 的 选择 符 就 不 是 HTML 元 素 的 名 称 了 ， 而 是 元 素 的 id 前 面 
添加 一 个 “#”， 举 例 来 说 : 


<p id="para1">Here is some text.</p> 
可 以 被 如 下 的 样式 声明 设置 样式 : 



















































































#paral { 
font-weight: bold; 
font-size: 12pt; 
color: black; 



































如 果 想 让 多 种 页 面 元 素 共享 同一 个 样式 声明 ， 只 需要 用 逗号 分 隔 多 
个 选择 符 。 比 如 下 面 这 样 的 样式 声明 会 影响 页 面 里 全 部 div 元 素 和 id 为 
paral 的 元 素 : 

div, #parai { 
color: yellow; 


background-color: black; 

































































另外 ， 我 们 还 可 以 按照 Glass 属性 对 元 素 归 类 ， 在 类 名 称 前 面 添加 一 
个 句点 作为 选择 符 : 


<p class="info">Welcome to my website.</p> 
<span class="info">Please log in or register using the form below.</span> 


下 面 这 样 的 声明 就 可 以 设置 上 面 两 个 元 素 的 样式 : 












































.info { 
font-family: arial, verdana, sans-serif; 
color: green; 


} 
13.1.3 ”在 哪里 保存 样式 声明 


与 JavaScript 语 句 类 似 ， 明 可 以 出 现在 页 面 里 ， 也 可 以 保 
存 到 外 部 文件 并 从 HTML 页 面 里 引 


为 了 引用 外 部 的 样式 表 ， 通 常 做 法 是 在 页 面 <head> 部 分 添加 这 样 一 
行 : 





























































































































<link rel="stylesheet" type="text/css" href="style.css" /> 


另外 ， 可 以 把 样式 声明 直接 放 到 页 面 <head> 部 分 ， 用 一 对 <sytle> 和 
</style> 标 签 包 围 : 




































































<style> 
p { 
color: black; 
font-family: tahoma 
} 
hi { 
color: blue; 
font-size: 22pt 
} 
</style> 






































最 后 要 说 明 的 是 ， 利 用 style 属 性 可 以 把 样式 声明 直接 添加 到 HTML 
元 素 : 

<p style="color:red; font-size: 12px;">Please see our terms of 
wservice.</p> 























dean: 











用 外 部 文件 定义 的 样式 表 可 以 方便 地 应 用 于 不 同 的 页 面 ， 而 在 页 面 内 部 定义 的 样式 表 就 
没有 这 种 便捷 性 了 。 























13.2 DOM 的 style 属 性 


























岗 ， 组 成 DOM 树 的 分 支 












































届 性 和 方法 。 





HTML 页 面 在 浏览 器 里 以 DOM 树 的 形式 表 
与 末端 被 称 为 节点 。 它 们 都 是 一 个 个 对 象 ， 都 具有 自己 的 
有 多 种 方法 可 以 选择 单个 的 DOM 节 点 或 节点 集合 ， 比 如 


document.getElementByld(). 


每 个 DOM 节 点 都 有 













































































个 style 属 性 ， 这 个 属 



























































性 本 身 也 是 个 对 象 ， 包 
































































































































含 了 应 用 于 节点 的 CSS 样 式 信 息 。 下 面 我 们 来 举例 说 明 。 
<div id="id1" style="width:200px;">Welcome back to my site.</div> 
<script> 
var myNode = document.getElementById("idi"); 
alert(myNode.style.width) ; 
</script> 
这 段 代码 会 显示 消息 “200px”。 
坏 消息 是 ， 虽 然 这 种 方式 在 用 于 内 联 样式 时 很 正常 ， 但 如 果 是 在 页 
面 <head> 部 分 里 使 用 <style> 元 素 ， 或 是 使 用 外 部 样式 表 来 设置 页 面 元 素 
的 样式 ， DOM 的 style 对 象 就 不 能 访问 它们 了 。 
然而 DOM 的 style 对 象 不 是 只 读 的 ， 我 们 可 以 利用 style 对 象 设 置 style 
属性 。 以 这 种 方式 设置 的 属性 会 被 DOM 的 style 对 象 返回 。 
说 明 : 
CSS 的 很 多 属性 名 称 连 字符 ， 比如 background-color、 font-size、text-align 等 。 但 
| JavaScript 3074 许 在 属性 sore ei 里 使 用 连 字 符 ， 因 此 需要 调整 这 些 名 称 的 书写 方式 。 方 法 








是 删除 其 中 的 连 字符 ， e aie 写 ， 于 是 font-size 变 成 fontSize，text-align 变 














| 成 textAlign， 以 此 类 
实践 
设置 style 属 性 
现在 来 编写 一 个 函数 ， 使 用 DOM 的 style 对 象 让 页 面 的 背景 颜色 和 字体 颜色 在 两 个 值 


之 间 切 换 。 

















function toggle() { 

var myElement = document.getElementById("idi"); 

if (myElement.style.backgroundColor == 'red') { 

myElement.style.backgroundColor = ‘yellow'; 
myElement.style.color = ‘black'; 


} else { 
myElement.style.backgroundColor = 'red'; 
myElement.style.color = ‘white'; 

} 


这 个 函数 首先 读 取 页 面 元 素 当 前 的 CSS 属 性 background Color， 把 这 个 颜色 与 红色 
(red) 进行 比较 。 























如 果 属 性 background Color 的 当前 值 是 red， 就 设置 元 素 的 style 属 性 ， 以 黄 底 白字 形式 
显示 文本 ; 否则 ， 就 以 红 底 白字 显示 文本 。 


我 们 利用 这 个 函数 切换 HTML 文 档 里 一 个 <span> 元 素 的 颜色 ， 完 整 的 代码 如 程序 清单 
13.1 所 示 。 













































































程序 清单 13.1 使 用 DOM 的 style 对 象 设置 样式 

















<!DOCTYPE html> 


<html> 
<head> 
<title>Setting the style of page elements</title> 
<style> 
span { 
font-size: 16pt; 
font-family: arial, helvetica, sans-serif; 
padding: 20px; 
} 
</style> 
<script> 
function toggle() { 
var myElement = document.getElementById("idi"); 
if (myElement.style.backgroundColor == 'red') { 
myElement.style.backgroundColor = “yellow 
myElement.style.color = 'black'; 
} else { 
myElement.style.backgroundColor = 'red'; 
myElement.style.color = ‘white'; 
} 
} 
window.onload = function() { 
document.getElementById("btni").onclick = toggle; 
} 
</script> 
</head> 
<body> 


<span id="id1">Welcome back to my site.</span> 
<input type="button" id="btni" value="Toggle" /> 
</body> 
</html> 


在 编辑 软件 里 创建 上 述 HTML 文 件 ， 加 载 到 浏览 器 观察 运行 的 效果 。 


当 页 面 最 初 载 入 时 ， 文 本 是 默认 的 黑色 ， 没 有 背景 色 。 这 是 因为 这 些 样式 既 不 是 以 内 
联 方式 在 页 面 head 部 分 以 <style> 指 令 设 置 ， 也 不 是 通过 DOM 设 置 的 。 









































当 用 户 点 击 按钮 之 后 ， OD a 9 景 颜色 。 因 为 此 时 的 背景 
色 不 是 红色 ， 所 以 函数 把 背景 设置 为 红色 ， 把 文本 设置 为 


再 次 点 击 按钮 ， 这 时 就 满足 背景 为 红色 的 判断 条 件 了 ， 就 会 把 颜色 设置 为 黄 底 黑 字 。 






































if(myElement.style.backgroundColor == ‘red’) 











图 13.1 展 示 了 程序 运行 的 效果 。 
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x Setting the style of page elements - Chromium P 
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图 13.1 在 JavaScript 里 设置 style 属 性 








13.3 ”使 用 className 访 问 类 


本 章 前 面 介绍 了 样式 与 内 容 分 离 的 好 处 ， 而 像 前 面 这 个 练习 使 用 
JavaScript 编 辑 style 对 象 的 属性 ， 却 可 能 影响 样式 与 内 容 分 离 。 如 果 
JavaScript 代 码 经 常 修 改元 素 的 样式 声明 ， 就 会 导致 页 面 的 样式 不 完全 由 
CSS 控 制 了 。 在 这 种 情况 下 ， 如 果 需 要 修改 JavaScript 应 用 的 样式 ， 就 必 
须 编 辑 涉及 的 全 部 JavaScript 函 数 。 


好 在 我 们 可 以 让 JavaScript 调 整 页 面 样式 时 并 不 覆盖 相应 的 样式 声 
明 。 利 用 元 素 的 className 属 性 ， 我 们 就 可 以 通过 修改 class 属 性 的 值 来 
调整 应 用 于 元 素 的 样式 。 有 具体 方法 如 程序 清单 13.2 所 示 。 


程序 清单 13.2 ”使 用 className 改 变 类 



















































































































































































































































































<!DOCTYPE html> 


<html> 
<head> 
<title>Switching classes with JavaScript</title> 
<style> 
-classA { 
width: 180px; 
border: 3px solid black; 
background-color: white; 
color: red; 
font: normal 24px arial, helvetica, sans-serif; 
padding: 20px; 
} 
.ClassB { 
width: 180px; 
border: 3px dotted white; 
background-color: black; 
color: yellow; 
font: italic bold 24px "Times New Roman", serif; 
padding: 20px; 
} 
</style> 
<script> 
function toggleClass() { 
var myElement = document.getElementById("id1"); 
if(myElement.className == "classA") { 
myElement.className = "classB"; 
} else { 
myElement.className = "classA"; 
} 
} 
window.onload = function() { 
document .getElementById("btn1").onclick = toggleClass; 
} 
</script> 
</head> 
<body> 


<div id="id1" class="classA"> An element with a touch of class.</div> 
<input type="button" id="btn1" value="Toggle" /> 

</body> 

</html> 











似 ， 只 是 它 不 操 


在 这 段 代 码 里 ， 页 面 <head> 部 分 的 <style> 元 素 声 
css classB, 函数 toggleClass0) 的 逻辑 与 程序 清单 13.1 里 
企 元 素 的 style 对 象 ， 而 是 获取 <div> 元 素 的 类 名 称 ， 把 
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它 的 值 设 置 为 cassA 或 classB 。 











图 13.2 














An element with | 





展示 了 脚本 运行 的 结果 。 
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有 的 toggle() 类 
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图 13.2 ”在 JavaScript 里 切换 不 同 的 类 
说 明 : 
除了 使 用 className 属 性 外 ， 还 可 以 把 元 素 的 class 属 性 设置 为 classA: 














element.setAttribute("class","classA"); 





但 是 ， 很 多 版 本 的 正在 设置 class 


说 




















属性 时 可 能 会 出 错 ， 而 使 用 className 就 一 切 正 常 。 所 以 














element.className="classA"; 














是 可 以 用 于 任何 浏览 器 的 。 











13.4 DOM 的 styleSheets 对 象 


document 对 象 的 styleSheets 属 性 是 一 个 数组 ， 包 含 了 页 面 上 全 部 样 
式 表 (无 论 样式 表 是 链接 到 页 面 的 外 部 样式 ， 还 是 在 页 面 <zhead> 部 分 里 
<style> 和 </style> 声 明 的 样式 ) 。 这 个 数组 里 的 项 目 以 数值 索引 ， 第 
一 个 出 现 的 样式 表 索 引 为 0。 


styleSheets.length 属 性 反映 了 页 面 上 全 部 样式 表 的 数量 。 
启用 、 禁 用 和 切换 样式 表 


数组 里 的 每 个 样式 表 都 有 一 个 属性 disabled， 其 值 为 布尔 值 true 或 
false。 它 是 可 读 写 的 ， 可 以 在 JavaScript 里 方便 地 启用 或 禁用 某 个 样式 
表 。 


document.styleSheets[@].disabled 
document.styleSheets[1].disabled 


上 面 这 两 行 代码 “启用 ”页 面 里 的 第 二 个 样式 表 〈 索 引 值 为 1) ，“ 禁 
用 "第 一 个 样式 表 〈 索 引 值 为 0) 。 


页 面 里 的 脚本 首先 声明 一 个 变量 



































































































































































































































true; 
false; 
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程序 清单 13.3 是 个 范例 ， 
whichSheet， 初 始 值 为 0: 


var whichSheet = Q; 


这 个 变量 用 于 记录 当前 在 使 用 两 个 样式 中 的 哪 一 个 。 下 一 行 代 码 禁 
了 页 面 上 第 二 个 样式 表 : 


document.styleSheets[1].disabled = true; 


函数 sheet0 在 页 面 加载 时 被 附加 到 按钮 的 onClick 事 件 处 理 器 ， 它 
成 三 项 任务 : 

























































































at 



























































。 根据 变 量 whichSheet 里 保存 的 索引 值 ， 禁 用 相应 的 样式 表 
document.styleSheets[whichSheet]. disabled. = true; 
. 把 whichSheet 的 值 在 0 和 1 之 间 1 Tih: 
whichSheet = (whichSheet == 1) ? @: 1; 
。 根据 变量 whichSheet 的 新 值 ， 启 用 相应 的 样式 表 : 
document. styleSheets[whichSheet]. disabled = false; 
























































上 述 操 作 的 结果 就 是 切换 使 用 页 面 的 两 个 样式 表 。 完 整 的 代码 如 程 
序 清单 13.3 所 示 。 























程序 清单 13.3 ”利用 styleSheets 属 性 切换 样式 表 











<!DOCTYPE html> 


<html> 
<head> 
<title>Switching Stylesheets with JavaScript</title> 
<style> 
body { 
background-color: white; 
color: red; 
font: normal 24px arial, helvetica, sans-serif; 
padding: 20px; 
} 
</style> 
<style> 
body { 
background-color: black; 
color: yellow; 
font: italic bold 24px "Times New Roman", serif; 
padding: 20px; 
} 
</style> 
<script> 


var whichSheet = @; 
document.styleSheets[1].disabled = true; 


function sheet() { 
document.styleSheets[whichSheet].disabled = true; 
whichSheet = (whichSheet == 1) ? 0: 1; 
document.styleSheets[whichSheet] .disabled 


false; 
} 
window.onload = function() { 
document.getElementById("btni").onclick = sheet; 
} 
</script> 
</head> 
<body> 
Switch my stylesheet with the button below!<br /> 
<input type="button" id="btn1" value="Toggle" /> 





</body> 
</html> 
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Switch my stylesheet with the button below! 

















图 13.3 ”利用 styleSheets 属 性 切换 样式 表 











虽然 样式 表 具 有 数值 索引 ， 但 并 不 便于 进行 选择 。 如 果 给 样式 表 设 置 标题 ， 并 且 编 写 
一 个 函数 ， 根 据 title 属 性 进行 选择 ， 就 会 容易 的 多 。 


如 果 调用 的 样式 表 不 存在 ， 我 们 希望 函数 以 适当 的 方式 进行 响应 ， 比 如 保持 正在 使 
的 样式 表 ， 并 且 返 回 提示 信息 。 


首先 ， 声 明 几 个 变量 并 且 初始 化 : 



























































var change = false; 


var oldSheet = 0; 


布尔 类 型 变量 change 的 值 表示 是 否 找到 了 指定 名 称 的 样式 表 。 如 果 找 到 了 ， 就 把 它 的 
值 设置 为 true， 表 示 要 改变 样式 了 。 


整 型 变量 oldSheet 的 初始 值 为 0， 用 于 保存 当前 启用 的 样式 表 数量 。 
然后 用 一 个 循环 遍历 数组 styleSheets: 
for (var i = 0; i < document.styleSheets.length; i++) 





















































对 于 每 个 样式 表 ， 


。 如 果 判 断 是 当前 使 用 的 样式 表 ， 就 把 它 的 索引 值 保 存 到 变量 oldSheet: 
if (document.styleSheets[i].disabled == false) 


oldSheet = i; 
































} 
。 在 循环 的 过 程 中 ， 确 保 每 个 样式 表 都 被 禁 


























{ 





{ 


document. styleSheets|[ i]. disabled = true; 




















。 如 果 当 前 样式 表 的 标题 符合 要 使 用 的 标题 ， 就 把 它 的 disabled 值 设置 为 false， 从 而 启 
用 这 个 样式 ， 并 且 立 即 把 变量 change 的 值 修改 为 tue: ， 
if (document.styleSheets[i].title == mySheet) 


























document .styleSheets[i].disabled = false; 


change = true; 
} 
在 遍历 全 部 样式 表 之 后 ， 可 以 根据 变量 change 和 oldSheet 的 状态 判断 是 否 处 于 更 换 了 














{ 

















样式 表 的 状态 ， 如 果 不 是 ， 就 把 以 前 使 用 的 样式 表 再 次 启 
if(!change) document.styleSheets[oldSheet].disabled = false; 
函数 最 后 返回 变量 change 的 值 。 


完整 的 代码 如 程序 清单 13.4 所 示 ， 把 它 保存 到 HTML 文 件 并 加 载 到 浏览 器 ， 观 察 运行 
情况 。 























E] 

















程序 清单 13.4 根据 tite 选 择 样式 表 


<!DOCTYPE html> 
<html> 
<head> 
<title>Switching stylesheets with JavaScript</title> 
<style title="sheet1"> 
body { 
background-color: white; 
color: red; 
} 
</style> 
<style title="sheet2"> 
body { 
background-color: black; 
color: yellow; 
} 
</style> 
<style title="sheet3"> 
body { 
background-color: pink; 
color: green; 
} 
</style> 
<script> 
function ssEnable(mySheet) { 
var change = false; 
var oldSheet = 0; 
for (var i = @; i < document.styleSheets.length; i++) { 
if (document.styleSheets[i].disabled == false) { 
oldSheet = i; 
} 
document.styleSheets[i].disabled = true; 
if(document.styleSheets[i].title == mySheet) { 
document.styleSheets[i].disabled = false; 
change = true; 


} 
if(!change) document.styleSheets[oldSheet].disabled = false; 
return change; 
F 
function sheet() { 
var sheetName = prompt("Stylesheet Name?"); 


if(!ssEnable(sheetName)) alert("Not found - original 
stylesheet retained."); 


} 
window.onload = function() { 

document .getElementById("btni").onclick = sheet; 
} 


</script> 





</head> 
<body> 
Switch my stylesheet with the button below!<br /> 
<input type="button" id="btni" value="Change Sheet" /> 
</body> 
</html> 
当 页 面 加 载 时 ， 函 数 sheetO 被 添加 到 按钮 的 onClick 事 件 处 理 器 。 每 当 用 户 点 击 按钮 
时 ，sheetO) 会 提示 用 户 输入 样式 表 的 名 称 : 
var sheetName = prompt("Stylesheet Name?"); 
然后 调用 ssEnable0) 函 数 ， 把 名 称 作为 参数 。 
如 果 函 数 返回 false， 表 示 没 有 更 换 样式 表 ， 程 序 就 会 向 用 户 反 馈 提示 信息 : 


if(!ssEnable(sheetName)) alert("Not found - original stylesheet 
retained."); 


脚本 运行 的 结果 如 图 13.4 所 示 。 
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413.4 利用 styleSheets 属 性 切换 样式 表 





13.5 “小 结 
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如 何 使 用 








css% 


面 CSS 样 式 的 几 种 方式 ， 包 括 如 何 使 








， 如何 操作 44 


全 部 








的 样式 表 。 
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13.6 ”问答 














问 : 能 否 使 用 JavaScript 处 理 单个 CSS 样 式 规则 ? 














答 : 能 ， 但 目前 这 类 代码 的 跨 浏览 器 效果 不 好 。Mozilla 浏 览 器 支 
持 cssRules 数 组 ， 而 正 把 相应 的 数组 命名 为 Rules。 另 外 ， 不 同 浏览 器 对 
于 标签 的 解释 也 会 有 明显 不 同 。 我 们 寄 希 望 于 以 后 版 本 的 浏览 器 能 够 解 
决 这 些 问题 。 





















































问 : 在 JavaScript 里 能 变换 鼠标 指标 吗 ? 


答 : 能 。style 对 象 有 一 个 cursor 属 性 ， 可 以 设置 一 些 不 同 的 值 来 表 
示 鼠 标的 形状 。 常 见 的 包括 : 


HZ: 像 瞄准 器 一 样 的 十 字 线 。 
Het: 通常 的 指针 形状 。 
MA: 插入 文本 的 提示 符 。 
等 待 ， 表 示 程 序 忙 。 
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13.7 作业 


请 先 回答 问题 ， 再 查看 后 面 的 答案 。 























13.7.1 测验 








1. 把 元 素 myElement 的 font-family 属 性 设置 为 verdana， 使 


入 





























是 : 
a. myElement.style.font-family="verdana"; 
b. myElement.style.fontFamily="verdana"; 


c. myElement.style.font-family("verdana"); 














2. 属性 cdlassName 可 以 用 于 : 








a. 访问 元 素 的 class 属 性 值 














b. 访问 元 素 的 name 属 性 值 








c. 给 元 素 添加 className 属 性 
























































3. 如 何 启用 styleSheets 数 组 里 索引 为 n 的 样式 表 ? 





a. document.styleSheets[n].active=true; 
b. document.styleSheets[n].enabled=true; 
c. document.styleSheets[n].disabled=false; 
13.7.2 BR 
1. ib. 
2. ia. 




















的 语句 


3. Vico 


13.8 ”练习 


编辑 程序 清单 13.1 的 代码 ， 修 改 其 他 一 些 样式 属性 ， 比 如 字体 、 元 
素 边框 、 填 充 和 对 齐 。 


修改 程序 清单 13.4 的 代码 ， 让 一 些 样式 成 为 外 部 链接 的 ， 而 不 是 包 
在 页 面 <zhead> 区 域 的 <style> 和 </style> 标 签 里 ， 观 察 是 否 会 有 不 同 的 


2 
A 
结果 。 



















































































第 14 章 ” 民 好 的 编程 习惯 


本 章 主要 内 容 包 括 : 














如 何 避 免 过 度 使 用 JavaScript 
编写 易 读 和 易 维护 的 代码 
关于 平稳 退化 





















































编写 代码 分 离 的 JavaScript 
使 用 功能 探测 
避免 内 联 代码 
妥善 处 理 错误 


作为 一 种 主要 用 途 是 给 Web 页 面 添加 功能 的 脚本 语言 ， 对 于 初学 编 
程 人 员 是 否 容易 上 手 ， 是 JavaScript 很 重视 的 一 个 方面 ， 但 这 也 导致 了 代 
码 编写 不 够 规范 ， 让 有 经 验 的 程序 员 感 到 迷惑 ， 让 JavaScript 在 某 些 圈子 
里 得 到 了 并 不 是 特别 好 的 名 声 。 


本 书 前 面 的 内 容 也 涉及 一 些 好 的 或 不 好 的 编程 习惯 ， 本 章 将 集中 介 
绍 一 些 良 好 的 编程 习惯 的 基本 准则 。 














。 如 何 分 离 样式 、 内 容 和 代码 
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14.1 避免 过 度 使 用 JavaScript 























页 面 到 底 需 要 ere 在 一 些 并 不 特别 需要 的 场合 ， 或 是 
建议 使 用 JavaScript 的 场合 ， 我 们 总 会 有 添加 JavaScript 代 码 和 强化 
x 互 的 冲动 。 
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: 用 户 在 浏览 互联 网 时 ， 花 在 你 的 页 国 e 
面 的 时 间 。 成 熟 的 互联 网 用 户 已 经 习惯 于 流行 的 界面 7 Ek 
菜单 、 标 题 和 标签 化 浏览 。 这 些 元 素 之 所 以 流行 ， “Hee 

2 












































Sor 
oO 





























它们 工作 稳定 、 外 观 漂亮 ， 而 且 不 需要 用 户 查看 什么 手册 就 可 Lb 
。 和 仔细 想 一 下 ， 用 户 熟 悉 的 操作 风格 ， 与 我 们 自己 设计 的 奇 
， 哪 一 个 更 能 提高 用 户 的 操作 效率 呢 ? 
经 需要 使 用 JavaScript 来 实现 的 视觉 效果 ， 现 在 很 多 都 可 以 利用 
完 实现 了 。 昌 然 两 种 方式 都 可 以 实现 相同 的 一 些 效果 ( 比 
图 像 变 换 和 某 种 菜单 ) ， 但 CSS 通 常 是 更 好 的 方式 ， 它 在 各 种 浏 

人 而 且 通 常 不 会 被 用 户 关 
。 的 情况 下 ， 页 面 会 按照 标准 HTML 显 示 ， 
常 的 结果 是 页 面 虽 然 不 是 很 好 看 ， 但 功能 还 是 完整 的 。 
lL 界 各 地 还 有 很 多 用 户 在 使 用 过 时 的 、 性 能 较 差 的 老 旧 计算 机 ， 而 
且 很 可 能 与 互联 网 的 连接 也 是 慢 速 且 不 可 靠 的 。 在 这 种 情况 下 ， 代 
人 码 对 性 能 的 影 响 是 很 明显 的 。 
有 时 使 代码 还 可 能 导致 降低 页 面 在 搜索 引擎 的 排名 ， 因 为 它们 的 
自控 器 未 必 能 够 正确 地 索引 由 JavaScript 生 成 的 内 容 。 


在 有 所 规划 的 前 提 下 谨慎 地 使 用 JavaScript， 它 会 是 一 个 很 好 的 工 
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， 但 有 时 候 ， 过 犹 不 及 。 








14.2 编写 易 读 和 易 维 护 的 代码 


我 们 无 法 知道 将 来 的 某 一 天 会 不 会 有 人 要 阅读 和 理解 我 们 编写 的 代 











码 ， 即 使 这 个 人 是 程序 员 自 己 。 时 光 的 流逝 与 
造成 影响 ， 当 时 很 熟悉 的 代码 也 会 变 得 陌生 Ej} 














工作 内 容 的 不 出 





变化 也 会 














HA. MEH 


他 人 要 理 














解 我 们 编写 的 代码 ， 他 们 的 编码 风格 、 命 名 规 
就 更 增加 了 理解 的 难度 


14.2.1 ”明智 地 使 用 注释 

















oe 























ENS) eee ea 














我 们 不 同 ， 


代码 中 关键 位 置 的 适当 注释 能 够 让 前 面 所 述 的 困境 大 为 改观 ， 它 是 




























































































对 后 来 者 的 说 明 与 提示 。 使 用 注 TE 键 在 于 确 
对 于 这 个 问题 是 仁者 见 仁 ， 智 者 见 智 ， 在 很 大 程度 上 取决 于 个 人 的 想 


段 定 后 来 要 阅读 代码 的 人 是 理解 JavaScript 的 ， 这 
于 语言 本 身 的 注释 就 没有 什么 意义 了 。JavaScript 开 发 人 员 员 的 确 在 编码 内 

















定 哪些 注释 是 有 用 的 ， 























格 与 技术 水 平 上 千差万别 ， 但 也 的 确 都 遵循 相同 的 语法 规则 。 




















些 注释 : 
。 代码 较 长 的 函数 或 对 象 的 简要 说 明 。 








在 阅读 代码 时 ， 比 较 难以 说 明 的 是 代码 背后 隐藏 的 思 
法 。 从 作者 个 人 经 验 来 说 ， 在 阅读 他 人 编写 的 代码 时 ， 








不 过 分 








因此 对 








维 过 程 与 算 
希望 看 到 如 下 这 








function calculateGroundAngle(x1,y1,z1,x2,y2 
eK 


* Calculates the angle in radians at which 
* a line between two points intersects the 
* ground plane. 
* @author Phil Ballard phil@www.example.com 
*/ 
if (x1>0) { 

… 其 他 代码 





,22){ 








。 对 易 混淆 或 易 误 解 代 码 的 注释 。 





// need to use our custom sort method for performance reasons 
var finalArray=rapidSort(allNodes, byAngle){ 
… 其 他 代码 


























。 原作 者 自己 的 技巧 或 经 验 。 





// workaround for image onload bug in browser X version Y 
if(!loaded(image1) ){ 
… 其 他 代码 











。 关于 代码 修改 的 注释 。 
// You can change the following dimensions to your preference: 
var height = 400px; 
var width = 600px; 





| Gas 

















| 有 不 少 体系 可 以 利用 代码 注释 来 生成 软件 文档 ， 详 情 请 见 http://code.google.com/p/jsdoc- 
| tookit/ 。 





14.2.2 ”使 用 适当 的 文件 名 称 、 属 性 名 称 和 方法 名 称 


尺码 的 自我 解释 程度 越 高 ， 源 代码 里 需要 的 注释 就 会 越 少 。 给 方法 
和 属性 使 用 含义 明确 的 名 称 就 是 个 很 好 的 习惯 。 


JavaScript 对 于 能 够 在 方法 〈 或 函数 ) 及 属性 或 变量 ) 名 称 里 使 用 
a a 但 仍然 有 足够 的 空间 让 我 们 使 用 准确 且 有 创意 的 名 
Ko 
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例 之 一 是 让 常数 的 名 称 全 部 大 与 : 


MONTHS PER YEAR = 12; 
































对 于 一 般 的 函数 、 方 法 和 变量 , “驼峰 命名 法 ?是 一 种 常用 的 命名 方 
式 ， 就 是 把 组 成 名 称 的 单词 连接 起 来 ， 每 个 单词 的 首 字母 大 写 ， 而 名 称 
的 第 一 个 字母 可 以 大 写 或 小 写 

var memberSurname = "Smith"; 


var lastGroupProcessed = 16; 
构造 函数 的 第 一 个 字母 一 般 是 大 写 的 

function Car(make, model, color) { 
statements 

































































这 种 大 写 方式 可 以 提醒 我 们 要 使 用 关键 字 new: 
var herbie = new Car('VW', 'Beetle', 'white'); 
14.23 ”尽量 复 用 代码 

一 般 来 说 ， 代 码 的 模块 化 程度 越 高 越 好 。 比 如 下 面 这 个 函数 : 


function getElementArea() { 
var high = document.getElementById("id1").style.height; 
var wide = document.getElementById("id1").style.width; 
return high * wide; 


























Nt 








} 
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这 个 函数 的 功能 是 返回 一 个 特定 元 素 在 屏幕 上 占据 由 
能 得 到 id="id1" 这 个 E 这 实际 上 是 没有 太 大 用 处 的 。 
把 代码 集中 到 函数 或 对 象 这 些 模块 里 ， 从 而 在 程序 里 反复 使 用 ， 这 
个 过 程 被 称 为 “抽象 化 ”。 对 于 上 面 这 个 函数 ， 我 们 可 以 把 元 素 的 id 作 为 
参数 传递 给 它 ， 从 而 让 它 具 有 “更 高 程度 的 抽象 化 ”， 更 具有 通用 性 : 








































































































































































































function getElementArea(elementId) { 


var elem = document.getElementById(elementId) ; 
var high = elem.style.height; 


var wide = elem.style.width; 
return parseInt(high) * parseInt(wide) ; 


























现在 就 可 以 对 任何 具有 id 的 元 素 调用 这 个 函数 了 : 
var areal getElementArea("idi"); 
var area2 getElementArea("id2"); 




















14.2.4 不 要 假设 

















在 使 用 前 面 这 个 函数 时 ， 如 果 传 递 的 参数 并 不 对 应 于 页 面 上 的 任何 
元 素 ， 会 有 什么 结果 ? 函数 会 产生 一 个 错误 ， 代 码 的 执行 被 挂 起 。 












































ZOPE NR, FERDE AS AE T HERBA elemenat 
有 效 的 。 现 在 来 修改 这 个 函数 ， 检 查 相应 的 页 面 元 素 是 否 存在 并 且 具有 

































































function getElementArea(elementId) { 
if (document.getElementById(elementId)) { 
var elem = document.getElementById(elementId) ; 
var high = elem.style.height; 
var wide elem.style.width; 
var area = parseInt(high) * parseInt(wide) ; 
if(!isNaN(area)) { 
return area; 
} else { 
return false; 


} 
} else { 
return false; 














这 样 就 好 多 了 。 如 果 页 面 没有 相应 的 元 素 ， 或 是 不 能 计算 出 有 效 的 
面积 数值 ， 或 是 页 面 元 素 不 具有 width 或 height 属 性 ， 这 个 函数 都 会 返回 


false。 



































14.3 


平稳 退化 











在 





























期 的 浏览 



































器 中 ， 有 些 甚至 不 支持 在 HTML 里 
































包含 
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字符 串 而 不 是 图 像 。alt 属 性 包含 的 字符 串 没 有 作 
设计 人 员 的 灵光 一 现 ， 可 能 是 图 像 的 标题 ， 可 
述 ， 可 能 是 从 其 资源 获得 相关 信息 的 建议 。 
































+n 












































这 是 关于 “平稳 退化 ”的 
让 页 面 设计 充 分 展示 























范例 ， 也 就 是 


期 
功能 ， 或 是 关闭 这 种 功 








能 地 把 站 点 的 内 容 呈 现 给 用 户 。 
























































再 以 JavaScript 本 身 为 例 ， JL 乎 每 款 浏 览 器 都 支持 
只 有 极 少 的 | ] 户 会 关闭 这 个 功能 。 那 么 我 们 还 需要 考 

















用 的 情况 吗 ? 答案 恐怕 
种 “用户 *， 它 们 











是 肯定 的 。 搜索 引擎 的 
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可 能 是 关 























使 用 Sime BES E, 我 们 需要 茶 种 方式 让 这 些 纯 文 本 的 浏览 器 在 过 到 
不 支持 的 标签 时 能 够 给 用 户 提供 一 些 有 益 的 帮 有 


对 于 <img> 标 记 来 说 ， 相 应 的 方式 是 使 用 alt 属 性 
而 设计 人 员 给 alt 属 性 设置 


E 


个 字符 串 ， 那 些 纯 文 本 浏览 器 就 会 显示 这 
上 么 硬性 规定 ， 基 本 都 是 

















图 片 。 在 开始 








RIA) 。 页 
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于 图 





FJava 


J 
Javascript AE D 


像 内 容 的 措 











当 用 户 的 浏 览 器 缺少 某 种 
时 ， 我 们 仍然 能 够 尽 可 

















Script， 











WEE 


是 网 站 的 








会 频繁 访问 站 点 ， 为 了 建立 页 



















































































































































































内 容 的 完整 过 引 尝试 






























































遍历 页 面 里 的 全 部 链接 。 如 果 有 的 链接 需要 JavaScript 民 务 ， 那 么 站 点 里 
有 些 页 面 内 容 就 可 能 WR 引 了 ， 这 可 能 会 影响 站 点 在 搜索 引擎 里 的 排 
名 情况 。 

另外 一 个 很 重要 的 方面 是 辅助 选项 。 无 论 浏览 器 的 功能 如 何 ， 总 是 
有 一 些 用 户 受到 其 他 的 限制 ， 比 如 不 能 使 用 鼠标 ， 或 是 必须 使 用 屏幕 阅 
读 软 件 。 如 果 站 点 不 考虑 到 这 些 用 户 的 体验 ， 他 们 就 不 会 再 访问 了 。 




















14.4 渐进 增强 


在 谈论 平稳 退化 时 ， 很 自然 就 会 想到 编写 一 个 考虑 周全 的 页 面 ， 
浏览 器 功能 较 弱 的 用 户 提供 完整 的 访问 。 


但 是 ， 支 持 “ 渐 进 增强 * 的 方案 会 从 男儿 度 来 看 待 这 个 问题 。 
ma 
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SE 




























































































个 
他 们 认为 应 该 先 建立 一 个 稳定 的 、 可 访问 的 、 功 能 完整 的 站 点 ， : 
内 容 可 以 被 几乎 任何 用 户 和 浏览 器 访问 ， 而 后 再 逐渐 添加 额外 的 功 色 
次 ， 满 足 能 够 利用 这 些 功能 的 用 户 。 


这 种 方式 确保 使 用 基本 配置 浏览 器 的 用 户 能 够 访问 站 点 ， 而 使 用 高 
级 浏览 器 的 用 户 也 能 获得 增强 功能 。 


分 离 样式 、 内 容 和 代码 


对 于 采用 "渐进 增强 ?技术 的 页 面 来 说 ， 内 容 是 最 关键 的 资源 。 
HTML 利用 标签 来 描述 页 面 内 容 ， 把 页 面 元 素 标签 为 标题 、 表 格 、 段 落 
























































































































































































































































从 理想 状态 来 说 ， 语 义 层 不 应 该 包括 任何 控制 页 面 显示 方式 的 信 
， 这 些 信息 上 应 该 图 CSS; 技术 构成 的 “表现 层 ” 提 供 。 通 过 链接 外 部 的 
Css 样 式 ， 我 们 可 以 避免 HTML 标 签 里 出 现 与 外 观 相关 的 信息 。 即 使 济 
不 支持 CSS， 仍 然 可 以 访问 并 显示 页 面 的 信息 ， 只 是 效果 可 能 是 
很 好 。 


而 JavaScript 代 码 要 添加 到 另 一 个 层 ， 也 就 是 所 谓 的 “行为 层 "。 不 支 
持 JavaScript 的 浏览 器 仍然 可 以 通过 语义 标签 访问 页 面 内 容 ， 如 果 浏 览 

支持 CSS， 就 还 可 以 看 到 表现 层 的 显示 效果 。 如 果 浏 览 器 支持 
JavaScript， 用 户 就 能 使 用 更 丰富 的 功能 ， 而 且 不 会 对 前 面 几 层 的 功能 产 


生 影 响 。 


为 了 达到 这 个 目的 ， 需 要 编写 “代码 分 离 ” 的 JavaScript。 






































































































































































































































14.5 ”代码 分 离 的 JavaScript 



































对 于 什么 是 "代码 分 离 " 的 JavaScript 并 没 
念 就 是 保持 行为 层 : 内 容 层 和 表现 层 的 分 离 

















14.5.1 jit SHTML 











及 有 明确 的 定义 ， 但 其 核心 概 






































第 一 步 ， 也 可 能 是 最 重要 的 一 步 ， 就 是 从 页 面 标 
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清除 JavaScript 





代码 。 以 前 的 JavaScript 应 用 程序 会 与 HIML 标 签 混 在 一 起 ， 就 像 下 面 这 











个 范例 中 的 onClick 事 件 一 样 





<input type="button" style="border: 1px solid blue;color: white" 


onclick="doSomething()" /> 











像 前 例 这 样 的 内 联 style 属 性 ， 会 让 事情 



































变 得 更 糟 。 





好 在 我 们 可 以 把 样式 信息 转移 到 样式 层 ， 比 如 给 HTML 标 签 添加 
































class 属 性 ， 从 而 与 外 部 CSS 文 件 里 的 样式 声明 产生 关联 : 








<input type="button" class="blueButtons" 


而 相关 的 CSS 定 义 可 以 是 这 样 的 : 


.blueButtons { 














onclick="doSomething()" /> 


border: 1px solid blue; 
color: white; 


} 


提示: 


























可 以 利用 多 种 不 同 的 选择 符 定义 自己 的 样式 规则 ， 包 括 input 元 素 或 是 利 


为 了 让 JavaScript 代 码 达 到 代码 分 离 的 目 








标 ， 可 以 使 











id 属性 。 
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与 CSS 类 似 的 








a 4 
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手段 。 给 HTML 标 签 里 页 面 元 素 添 加 一 个 id 属性 ， 就 可 以 把 外 部 
JavaScript 代 码 附 加 到 事件 处 理 器 ， 保 持 JavaScript 与 HTML 标 签 的 分 离 。 
修改 的 HTML 元 素 如 下 所 示 : 


<input type="button" class="blueButtons" id="btn1" /> 
而 相应 的 事件 处 理 器 是 在 JavaScript 代 码 里 添加 的 : 


function doSomething() { 
. statements .... 












































} 
document.getElementById("btni").onclick = doSomething; 























在 DOM 准 备 好 之 前 是 不 能 使 用 它 的 ， 所 以 这 样 的 代码 必须 通过 像 window.onload 这 样 的 方 
法 来 确保 DOM 的 可 用 性 。 本 书 有 很 多 这 样 的 范例 。 


14.5.2” 仅 把 JavaScript 作 为 性 能 增强 手段 


在 “渐进 增强 ”的 理念 中 ， 即 使 JavaScript 功 能 被 关闭 ， 页 面 也 应 正常 
工作 。JavaScript 对 页 面 效 果 的 增强 应 该 被 视 作 对 允许 J i 的 浏览 
器 的 一 种 奖励 。 


假设 我 们 要 编写 表单 检验 代码 (这 是 JavaScript 的 常见 用 途 之 一 )， 
下 面 是 一 个 简单 的 搜索 表单 : 


<form action="process.php"> 

<input id="searchTerm" name="term" type="text" /><br /> 
<input type="button" id="btn1" value="Search" /> 
</form> 


我 们 要 编写 一 段 程 序 ， 防 止 搜 索 字 段 为 空 时 提交 表单 。 比 如 下 面 的 
函数 checkform()， 它 将 附加 到 search 按 钮 的 onClick 事 件 处 理 器 : 












































































































































function checkform() { 
if (document. forms[Q@].term.value == "") { 
alert("Please enter a search term."); 
return false; 
} else { 
document.forms[@].submit(); 


} 
window.onload = function() { 
document.getElementById("btn1").onclick = checkform; 











这 段 代 码 很 普通 ， 但 如 果 JavaScript 被 关闭 了 ， 会 怎么 样 ? 按钮 就 没 
任何 功能 了 ， 用 户 也 就 不 能 提交 表单 了 。 对 户 来 说 ， 肯 定 是 更 愿 
意 能 够 使 用 这 个 表单 ， 即使 没有 关于 输入 检查 的 “强化 ”功能 。 


现在 对 表单 进行 一 点 调整 ， 让 按钮 的 类 型 变 为 submit 而 不 是 
button， 并 且 修 改 checkformO 函 数 。 



























































































































































<form action="process.php"> 
<input id="searchTerm" name="term" type="text" /><br /> 
<input type="submit" id="btni" value="Search" /> 
</form> 


修改 后 的 checkform0 函 数 如 下 ; 


function checkform() { 
if (document.forms[@].term.value == "") { 
alert("Please enter a search term."); 
return false; 
} else { 
return true; 


} 


window.onload = function() { 
document.getElementById("btn1").onclick = checkform; 


当 JavaScript 功 能 激活 时 ， 给 submit 按 钮 返回 false 会 禁止 按钮 的 默认 
操作 ， 也 就 是 阻止 于 单 提交 。 如 果 JavaScript 功 能 被 关闭 ， 当 用 户 点 击 这 
个 按钮 时 ， 表 单 仍然 会 被 提交 。 


















































14.6 ”功能 检测 


尽 可 能 直接 检测 浏览 器 相应 的 功能 是 否 存在 ， 并 且 让 代码 只 使 用 存 
在 的 功 
以 
A 

































































clipboardData 对 象 为 例 ， 本 书 编写 时 只 有 了 正 使 用 这 个 对 象 。 在 代 
码 中 使 用 这 个 对 象 之 前 ， 执 行 一 些 检测 是 很 有 必要 的 ; 


© JavaScript 发 现 这 个 对 象 了 吗 ? 
。 如 果 对 象 存在 ， 它 是 否 支 持 我 们 要 使 用 的 方法 ? 


下 面 的 函数 试图 利用 clipboardData 对 象 直接 向 剪贴 板 写 入 一 段 文 
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function setClipboard(myText){ 


if((typeof clipboardData != 'undefined') && (clipboardData.setData)){ 
clipboardData.setData("text", myText); 
} else { 


document.getElementById("copytext").innerHTML = myText; 
alert("Please copy the text from the ‘Copy Text' field to your 
clipboard"); 
} 
} 











BY 

















它 首先 利用 typeof 测 试 对 象 是 否 存在 : 
if((typeof clipboardData != ' undefined ' ) 
同时 ， 函 数 还 要 求 setData() 方 法 必须 存在 : 
... && (ClipboardData.setData) ){ 


”只 要 有 一 个 条 件 不 满足 ， 函 数 就 会 提供 另 一 种 稍微 麻烦 一 点 的 方 
法 ， 就 是 把 文本 写 入 到 页 面 元 素 ， 再 让 用 户 把 文本 拷贝 : 
document.getElementById("copytext").innerHTML = myText; 


alert("Please copy the text from the 'copyt ext' field to your 
clipboard"); 







































































oq 



































在 这 段 代 码 里 并 没有 检测 浏览 器 是 否 是 耻 〈 或 其 他 浏览 器 ) 。 只 要 
他 浏览 器 支持 所 需要 的 功能 ， 这 段 代码 就 能 正 确 检 测 到 。 






































根据 操作 数 的 不 同 ，typeof 操 作 符 返回 如 下 一 些 结果 : 


“undefined”, “object”. “function”, “boolean”, “string”=%“number”. 




































































































































































































































































































































































14.7 ”妥善 处 理 错误 
当 JavaScript 程 序 遇 到 其 种 错 误 时 ，JavaScript 解 析 器 内 部 会 生成 一 
个 错误 或 区 它 是 否 会 显示 给 用 户 ， 以 及 把 什么 显示 给 用 户 ， 取 决 于 
用 户 使 用 的 浏览 器 及 设置 。 用 户 可 能 会 看 到 某 种 形式 的 错误 消息 ， 或 是 
产生 错误 的 程序 不 反馈 什么 信息 但 也 不 正常 运行 。 
这 两 种 情况 对 于 用 户 来 说 都 不 好 ， 因 为 不 知道 哪里 出 了 问题 ， 也 不 
知道 如 何 处 理 这 些 情况 。 
在 编写 跨 浏 览 器 和 跨 平台 的 代码 时 ， 我 们 能 够 预见 到 某 些 领域 可 能 
发 生 错 误 ， 比 如 
。 人 是 否 支 持 某 个 对 象 ， 或 是 这 种 支持 是 否 是 与 标准 兼容 
。 独立 进程 是 否 已 经 运行 结束 ， 比 如 外 部 文件 是 否 已 经 完成 加 载 
使 用 try 和 catch 
使 用 try 和 catch 语 句 可 以 捕获 潜在 的 错误 ， 并 且 按 照 一 定 规则 处 理 
它们 。 
try 语 句 让 我 们 可 以 尝试 运行 一 段 代码 ， 如 果 运 行 正常 ， 就 没有 任何 
问题 。 如 果 发 生 了 错误 ， 可 以 使 用 catch 语 名 在 错误 消息 被 发 送 给 用 户 之 
前 捕获 它 ， 并 且 决 定 如 何 处 理 这 个 错误 。 
try 1{ 


doSomething(); 


} 


catch(err) 


{ 


doSomethingE1se() ; 





注意 这 个 语法 : 
catch(identifier) 
这 里 的 identifier 是 错误 被 捕获 时 创建 的 一 个 对 象 ， 它 包含 了 关于 错 


误 的 信息 。 举 例 来 说 ， 如 果 要 提示 用 户 关 于 JavaScript 运 行 时 错误 ， 可 以 
使 用 这 样 的 代码 结构 : 


catch(err) { 
alert(err.description) ; 



















































































这 样 会 打开 一 个 对 话 框 显示 错误 的 详细 情况 。 


第 16 章 在 介绍 创建 Ajax 程序 所 需 的 对 象 时 ， 也 会 使 用 ry 和 catch 语 句 。 



































把 代码 调整 为 < 代码 分 离 > 状态 


我 们 时 常 都 需要 修改 代码 ， 让 它 保 持 良 好 的 代码 分 离 状 态 。 现 在 先 来 看 看 第 4 章 编写 
的 一 段 代 码 ， 如 程序 清单 14.1 所 示 。 








程序 清单 14.1 分 离 度 不 够 的 脚本 








<!DOCTYPE html> 


<html> 
<head> 
<title>Current Date and Time</title> 
<style> 
p {font: 14px normal arial, verdana, helvetica;} 
</style> 
<script> 
function telltime() { 
var out = ""; 
var now = new Date(); 
out += "<br />Date: " + now.getDate(); 
out += "<br />Month: " + now.getMonth(); 
out += "<br />Year: " + now.getFullYear(); 
out += "<br />Hours: " + now.getHours(); 
out += "<br />Minutes: " + now.getMinutes(); 
<!DOCTYPE html> 
<html> 
<head> 
<title>Current Date and Time</title> 
<style> 
p {font: 14px normal arial, verdana, helvetica;} 
</style> 
<script> 
function telltime() { 
var out = ""; 
var now = new Date(); 
out += "<br />Date: " + now.getDate(); 


out += "<br />Month: " + now.getMonth(); 


out += "<br />Year: " + now.getFullYear(); 


out += "<br />Hours: " + now.getHours() ; 
out += "<br />Minutes: " + now.getMinutes(); 
out += "<br />Seconds: " + now.getSeconds(); 
document .getElementById("divi").innerHTML = out; 
} 
</script> 
</head> 
<body> 


The current date and time are:<br/> 
<div id="div1"></div> 


<script> 
telltime(); 
</script> 
<input type="button" onclick="location.reload()" value="Refresh" /> 
</body> 
</html> 


很 显然 ， 这 段 脚本 有 一 些 可 以 改进 的 地 方 。 


。 JavaScript 语 句 位 于 页 面 的 <script> 和 </script> 标 签 之 间 ， 而 它们 最 好 是 位 于 单独 的 文 

件 里 。 
。 按钮 有 个 内 联 的 事件 处 理 器 。 
。 在 不 支持 JavaScript 的 浏览 器 里 ， 按 钮 不 会 完成 任何 功能 。 


首先 ， 我 们 把 JavaScript 代 码 都 转移 到 一 个 单独 的 文件 ， 并 且 去 除 内 联 的 事件 处 理 器 ; 
还 要 给 按钮 设置 id 属性 ， 用 于 在 代码 里 标识 这 个 按钮 来 添加 事件 处 理 程序 。 


接 下 来 ， Br 浏览 器 不 使 用 JavaScript 的 情况 。 为 此 ， 利 用 <noscript> 元 素 给 用 户 显 
示 一 段 信息 ， 引 导 他 们 使 用 其 他 的 时 间 信息 来 源 : 


<noscript> 
Your browser does not support JavaScript<br /> 
Please consult your computer's operating system for local date and 
time information or click <a href="clock.php" target="_blank">HERE</a> to 
read the server time. 
</noscript> 
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提示 : 
对 于 关闭 JavaScript 功 能 或 是 不 支持 客户 端 脚本 的 浏览 器 来 说 ，<noscript> 标 签 提供 了 一 些 额外 可 用 的 内 


容 。 任 何 能 够 用 于 HTML<body> 内 部 的 元 素 都 可 以 用 于 <noscript>， 并 且 会 在 浏览 器 不 能 运行 脚本 时 自动 呈 
现 。 


修改 后 的 HTML 文 件 如 程序 清单 14.2 所 示 。 








=y 


程序 清单 14.2 ”修改 后 的 HTML 页 




















<!DOCTYPE html> 
<html> 
<head> 
<title>Current Date and Time</title> 
<style> 
p {font: 14px normal arial, verdana, helvetica;} 
</style> 
<script src="datetime.js"></script> 
</head> 
<body> 
The current date and time are:<br/> 
<div id="div1"></div> 
<input id="btni" type="button" value="Refresh" /> 
<noscript> 
<p>Your browser does not support JavaScript.</p> 
<p>Please consult your computer's operating system for local date 
and time information or click <a href="clock.php" 
target="_blank">HERE</a> to read the server time.</p> 
</noscript> 
</body> 
</html> 


在 JavaScript 源 文件 datetime.js 里 ， 我 们 利用 window.onload 给 按钮 添加 事件 处 理 器 ， 然 
后 调用 telltime0 来 生成 要 在 页 面 上 显示 的 日 期 与 时 间 信 息 。 有 具体 代码 如 程序 清单 14.3 所 
示 。 










































































程序 清单 14.3 datetime.js 





function telltime() { 


var out = 


var now = n 


out 
out 
out 
out 
out 
out 


document .getElementById("divi") .innerHTML 


+= "<br 
+= "<br 
+= "<br 
+= "<br 
+= "<br 
+= "<br 


Wa 
J 


ew Date(); 


/>Date: " + now.getDate(); 
/>Month: " + now.getMonth(); 
/>Year: " + now.getFullYear(); 
/>Hours: " + now.getHours(); 
/>Minutes: " + now.getMinutes(); 
/>Seconds: " + now.getSeconds(); 


out; 


window.onload = function() { 

document .getElementById("btn1").onclick= function() 
{location.reload();} 

telltime(); 


当 JavaScript 功 能 启 

















时 ， 这 段 脚本 的 运行 情况 与 第 4 章 的 一 样 。 如 果 JavaScript 功 能 























RAY, 














户 会 看 到 如 








14.1 所 示 的 结果 。 








z Current Date and Time - Mozilla Firefox ^ 一 + x 
File Edit View History Bookmarks Tools Help 
(J current Date and Time (=) oN {v 


© @ J E file:home/phisamsjtesttime.html v 











The current date and time are: 


| Refresh 


Your browser does not support JavaScript 





Please consult your computer's operating system for local date and time 
information or click HERE to read the server time. 


























图 14.1 为 没有 JavaScript 功 能 的 用 户 提 供 的 额外 信息 











14.8 


本 章 介绍 了 在 编写 代码 时 的 一 些 好 方式 ， 它 们 可 以 帮助 我 们 更 


地 完成 项 目 ， 有 更 好 的 质 时 


小 结 
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更 易于 维 
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快速 


ca 


14.9 问答 
H: 为 什么 有 的 用 户 会 关闭 JavaScript 功 能 ? 


答 : 服务 商 或 是 公司 管理 者 都 可 能 关闭 浏览 器 的 JavaScript 功 能 ; 
提高 安全 性 ， 比 如 学 校 或 是 网 吧 就 是 这 种 典型 的 环境 。 


另外 ， 有 些 公司 的 防火 墙 、 广 告 屏 蔽 和 杀毒 软件 都 可 能 禁 
JavaScript 运 行 。 而 有 些 手机 上 汐 浏览 器 对 JaeScript 的 支持 也 不 完全 。 


问 : 处 理 不 启用 JavaScript 功 能 的 情况 时 ， 除 了 <noscript> 标 
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答 : 避免 使 用 <noscript> 的 一 种 方法 是 把 启用 JavaScript 功 能 的 用 户 
跳 转 到 包含 JavaScript 代 码 的 增强 页 面 : 


<script>window. location="enhancedPage.html";</script> 


如 果 JavaScript 功 能 是 开启 的 ， 上 面 这 行 代码 就 会 把 用 户 转 到 增强 页 
面 。 如 果 浏览 器 不 支持 JavaScript， 这 行 代码 就 不 会 执行 ， 用 户 就 会 继续 
查看 普通 版 本 的 页 面 。 





































































































14.10 ”作业 


请 先 回答 问题 ， 再 查看 后 面 的 答案 。 


























14.10.1 测验 
1. 把 代码 模块 化 以 达到 更 加 通用 的 目的 ， 这 个 过 程 被 称 为: 



































b. 继承 
c. X| JavaScript 
2. 页 面 的 CSS 应 该 尽 可 能 处 于 : 


a "语义 





Ml 








b. 表现 


c. 行为 


NI 





Ni 








3. 根据 剥离 JavaScript 代 码 的 原则 ，JavaScript 代 码 应 该 位 于 : 
a. 外 部 文件 























b. 页 面 <head> 部 分 的 <script> 和 </script> 标 签 里 
c. AK 
14.10.22 ”答案 
1. ida. 
2. 选 b。 如 果 可 能 ，CSS 都 应 该 位 于 表现 层 。 
3. 选 a。 外 部 文件 是 最 好 的 选择 。 














14.11 


功能 





功能 
钮 。 


对 程序 清 














练习 
从 前 面 章节 


j 情况 下 , 能 


表单 14. 


的 











的 用 户 只 能 看 

















(提示 : 


利用 








实践 "项 目 中 挑选 一 些 范例 代码 ， 看 看 在 不 影响 脚本 

















够 进行 哪些 修改 让 代码 的 独立 性 更 强 。 











2 和 14.3 的 代码 做 进一步 修 
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多 改 ， 让 没有 开启 JavaScript 





到 <noscript> 标 签 里 的 内 容 ， 人 








innerHTML 或 DOM 方 法 把 





这 些 元 素 写 入 页 面 。 











第 15 章 ”图 形 与 动画 
本 章 主要 内 容 包括 ， 


如 何 预 加 载 图 像 
使 用 setTimeout() 和 setInterval() 方 法 
渐变 不 透明 度 

DOM 移 位 

优化 性 能 


从 JavaScript 诞 生 开 始 ， 它 最 常见 的 用 途 之 一 就 是 利用 图 形 效 果 和 动 
画 给 页 面 增添 趣味 。 本 章 将 介绍 如 何 实现 这 些 功 能 。 








































































































15.1 预 加载 图 像 

本 书 前 面 的 一 些 例 3 ENET sre PRESEN 图 像 的 变化 。 当 
src 属 性 被 赋予 新 值 时 ， 如 果 浏览 器 的 缓存 里 并 没有 指定 的 图 像 ， 它 就 会 
尝试 下 载 这 个 图 像 。 





























































































































在 大 多 数 情况 下 ， 这 种 方式 都 没有 
器 加 载 小 图 像 ， 或 是 与 互联 网 有 高 速 
大 ， 服 务 器 性 能 比较 差 ， 或 是 连接 速 

像 过 程 所 产生 的 明显 的 延 时 会 打 断 

















十 么 问题 ， 特 别 是 在 从 本 地 服务 
连接 时 。 然 而 ， 当 图 像 文件 比较 
度 比 较 低 时 ， 就 会 产生 问题 。 获 取 
页 面 操作 的 流畅 性 ， 让 用 户 感觉 困 












































































































































由 图 像 就 能 够 很 好 地 改善 用 户 体验 。 其 理念 











Niu 


在 这 种 情况 下 , “ 预 加 
在 用 户 请 求 之 前 加 载 页 面 可 能 需要 的 图 像 数 据 ， 这 样 用 户 就 会 感觉 到 
像 加 载 很 快 ， 这 种 技术 对 于 图 像 库 或 其 他 需要 大 量 使 
图 像 的 站 点 尤为 有 


实现 预 加 载 图 像 的 方法 很 简单 ， 只 要 在 JavaScript 里 实例 化 一 个 
image 对 象 ， 再 把 需要 预 加 载 的 图 像 的 URL 传 递 给 它 即 可 : 


var imgi = new Image(); 
aie .src="http://www.example.com/imaged. gif"; 


要 预 加 载 多 个 图 像 的 情况 是 很 常见 的 。 达 到 这 个 目标 的 简单 方式 
是 把 e T, 然后 循环 遍历 数组 ， 把 每 个 图 像 URL 赋 
予 image 对 象 ， 从 而 达到 把 它 [保存 到 浏览 器 缓存 的 有 的 。 下 面 这 个 函 
数 是 附加 到 window.onload 事 件 的 ， 这 样 当 页 面 首 次 加 载 时 ， 图 像 数 据 就 
保存 到 缓存 了 。 
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window.onload = function() { 
var img1 = new Image(); 
var img urls = new Array(); 
img_urls[Q] = "http://www.example.com/imageQ.gif"; 
img_urls[1] "http: //www.example.com/image1.gif"; 
img_urls[2] "http: //www.example.com/image2.gif"; 
for(i=0; i < img_urls.length; i++) { 

img1.src=img_urls[i]; 





15.2 页面 元 素 的 动画 


在 动画 片 和 视频 游戏 等 很 多 领域 ， 我 们 都 可 以 看 到 动画 。 所 谓 动 
画 ， 就 是 可 见 物体 的 外 观 及 /或 位 置 在 一 段 时 间 内 不 断 变化 。 


如 果 变 化 量 很 小 ， 并 且 有 适当 的 时 间 间 隔 ， 就 会 形成 连续 的 画面 。 


JavaScript 里 的 动画 概念 与 之 类 似 ， 就 是 一 个 或 多 个 DOM 元 素 根据 
程序 逻辑 形成 的 模式 进行 移动 。 


为 了 获得 流畅 的 动画 ， 这 些 DOM 元 素 必 须 以 一 定 频率 移动 。 在 视 
频 领 域 ， 这 个 频率 被 称 为 帧 速率 ， 单 位 是 “ 帧 每 秒 ”(fps〉。 


代码 实现 这 种 效果 的 最 简单 方式 是 建立 一 个 循环 ， 设 置 一 定 的 延 
时 ， 每 次 循环 时 移动 一 次 要 动画 的 元 素 。 


为 此 ，JavaScript 提 供 了 setTimeout() 和 setInterval() 方 法 。 

















































































































































































































setTimeout() 和 clearTimeout() 都 是 window 对 象 的 方法 。 


15.2.1 setTimeout() 





setTimeout(action, delay) 方 法 会 在 第 二 个 参数 指定 的 时 间 之 后 (单位 
是 毫秒 ) 调用 第 一 个 参数 指定 的 函数 〈 或 计算 表达 式 的 值 ) ， 比 如 可 以 
以 固定 周期 显示 特定 格式 的 元 素 : 


<div id="id1i">I'm about to disappear!</div> 

































































假设 页 面包 含 上 述 这 个 <div> 元 素 ， 然 后 在 页 面 <head> 部 分 的 
<script> 元 素 里 输入 如 下 代码 : 





























function hide(elementId) { 
document .getElementById(elementId).style.display = 'none'; 
} 
window.onload = function() { 
setTimeout("hide('id1')", 3000); 
} 


当 页 面 加 载 完 成 之 后 3 秒 会 调用 hide0 函 数 ， 从 而 让 <div> 元 素 隐 
藏 。 



































setTimeout() 方 法 有 一 个 返回 值 ， 如 果 稍 后 要 取消 这 个 定时 器 函数 ， 
可 以 把 这 个 返回 值 传递 给 clearTimeout() 方 法 。 


var timeri = setTimeout("hide('id1')", 3000); 
clearTimeout (timer1); 














15.2.2 setInterval() 














setInterval(action,delay) 方 法 与 setTimeout() 的 工作 方式 类 似 ， 只 是 它 
不 仅 进行 一 次 延 时 ， 而 是 反复 执行 ， 时 间 间 隔 以 第 二 个 参数 指定 ， 自 


是 毫秒 。 

















setInterval() 也 返回 一 个 值 ， 传 递 给 clearInterval() 方 法 就 可 以 停止 这 
个 定时 器 。 


var timeri = setInterval("updateClock()", 1000); 
clearInterval(timert) ; 











第 6 章 有 使 用 setInterval0 的 范例 。 








15.3 ”渐变 不 透明 度 


改善 页 面 显示 的 一 个 常用 方式 是 让 页 面 在 透明 与 不 透明 之 间 渐 变 ， 
人 体 方法 是 操作 特定 页 面 元 素 的 不 透明 度 ， 逐 渐 降低 元 素 的 不 透明 度 
让 背景 页 面 元 素 慢 慢 显示 出 来 ， 让 前 景 元 素 展 现 出 淡 昌 
效果 。 


Te 明度 已 经 出 现 多 年 了 ， 但 它 在 跨 浏览 器 上 的 表现 是 令 人 困 
惑 的 。 最 终 ， 不 同 的 浏览 器 终于 达成 了 语法 上 的 一 致 ， 虽 然 还 没有 让 不 
透明 度 在 全 部 浏览 器 上 有 统一 的 工作 方式 ， 但 最 近 事 态 的 确 有 不 少 改进 
了 。 对 于 Firefox、Safari、Chrome/Chromium、Opera 和 IE 9， 方 法 是 设 
置 style 对 象 的 opacity 属 性 ， 其 值 在 0 到 1 之 间 。 
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Por ala 览 器 都 使 用 自己 专用 的 属性 定义 不 透明 度 ， 让 开发 人 员 不 得 不 编写 一 些 “ 怪 
异 ” 的 代码 : 














[| -khtm1 -opacity: .5; 
-moz -opacity: .5; 





























最 近 ， 全 部 浏览 器 都 改 为 使 用 opactiy 属 性 。 


ac 元 素 是 完全 透明 的 ， 设置 为 1 时， 元 素 是 完全 
不 透明 的 。 


对 于 下 的 不 透明 度 ， 必 须 修改 style 对 象 的 和 ter 属 性。 这 个 属性 的 取 
值 范围 不 是 0 到 1，3 各 用 特殊 的 语法 。“alpha(opacity=0)” 是 把 元 素 
设置 为 透明 的 ， 而 “alpha(opacity=100)” 把 元 素 设 置 为 不 透明 。 
利用 功能 检测 可 以 确定 使 用 什么 属性 并 设置 什么 值 ， 从 而 实现 跨 3 
台 的 操作 : 
function setOpacity(opac) { 

elem.style.opacity = opac/10Q; 

elem.style.filter = 'alpha(opacity=' + opac + ')'; 
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这 个 函数 接受 一 个 从 1 到 100 之 间 的 参数 ， 进 行 必要 的 缩放 ， 设 置 相 
应 的 style.opacity 的 值 。 浏 览 器 会 执行 自己 能 够 理解 的 语句 ， 忽 上 略 男 一 个 


语句 。 























然后 就 可 以 利用 setTimeout0 编 写 函数 来 实现 渐变 : 

var opac = 0; 

var timert; 

function fadeIn(opac) { 
if(opac < 100) { 








opac++; 

setOpacity(opac) ; 

timer1 = window.setTimeout("fadeIn(" + opac + ")", 50); 
} else { 


clearTimeout(timer1); 


} 




















变量 opac 保 存 元 素 的 当前 不 透明 度 ， 值 的 范围 是 1 到 100。 这 个 函数 
是 递归 的 ， 在 opac 小 于 100 时 ， 函数 会 把 opac 加 1， 设置 目标 元 素 elem 的 
不 透明 度 ， 然 后 延 时 50 毫 秒 之 后 调用 自己 。 


操作 完成 之 后 ， 调 用 clearTimeout() 方 法 取消 这 个 定时 器 。 






















































































15.4 CSS 3 过 渡 、 转 换 和 动画 


利用 JavaScript 可 以 实现 各 种 效果 ， 但 很 多 直观 的 效果 往往 需要 不 少 
的 代码 。 给 页 面 元 素 添加 一 些 简单 效果 应 该 有 更 简 的 方法 。 对 于 一 些 
浏览 器 来 说 ， 这 些 功能 已 经 以 CSS 过 渡 、 转 换 和 动画 的 方式 实现 了 。 虽 
然 这 些 功 能 属于 CSS 3， 但 很 多 浏览 器 已 经 提供 了 不 同 程度 的 支持 。 


但 是 ， 当 前 这 些 效果 的 实现 在 不 同 浏览 器 里 需要 使 用 不 同 的 前 级 




























































































































































































在 下 面 的 范例 里 ， 我 们 添加 一 个 过 渡 效 果 在 支持 这 个 功能 的 浏览 
器 里 ) ， 在 鼠标 指向 链接 时 来 修改 链接 的 背景 颜色 。 

如 果 要 达到 跨 浏览 器 的 目标 ， 目 前 上 述 效果 只 能 通过 JavaScript (或 
也 技术 ， 如 Flash) 来 实现 ， 但 在 将 来 会 仅 利用 几 行 CSS 就 可 以 达成 。 
下 面 是 范例 链接 的 代码 : 

<a href="somepage.html" class="trans">Show Me</a> 
PID Sie aR SOKA 及 指针 悬浮 状态 背景 颜色 的 CSS 声 明 ， 它 可 以 
在 多 个 浏览 器 里 正常 展示 。 可 以 看 出 其 中 使 用 了 多 个 不 同 的 前 级 ， 对 应 


es 而 没有 前 绥 的 那 一 行 声明 ， 是 为 了 将 来 统一 标准 所 准 


























































































































































































































a.trans { 
background: #669999; 
-webkit-transition: background @.5s ease; 
-moz-transition: background @.5s ease; 
-o-transition: background @.5s ease; 
transition: background @.5s ease; 
a.trans:hover { 
background: #999966; 





关于 CSS3 过 渡 、 转 换 和 动画 的 详细 信息 ， 请 参考 http://css3.bradshawenterprises.com/all/ 。 


155 DOM 移 位 
使 用 类 似 于 不 透明 度 动画 的 技术 ， 还 可 以 操作 DOM 对 象 的 位 置 。 
比如 让 一 个 元 素 从 屏幕 左 侧 移动 到 右 侧 ， 可 以 利用 递归 定时 函数 修改 元 
素 的 style.left 属 性 值 : 
function moveItRight() { 
el.style.left = parseInt(el.style.left) + 2 + 'px'; 
timeri = setTimeout(moveItRight, 25); 







































































对 上 面 这 个 函数 进行 简单 的 修改 就 得 到 了 程序 清单 15.1 的 代码 。 它 
把 元 素 <div> 以 动画 效果 从 屏幕 的 左 侧 移动 到 右 侧 。 


程序 清单 15.1 动画 DOM 元 素 















































<!DOCTYPE html> 
<html> 
<head> 
<title>Animating a DOM Element</title> 
<style> 
#div1 { 
position: absolute; 
border:1px solid black; 
width: 5px; 
height: 50px; 
left: Q@px; 


top: 100px; 
} 
</style> 
<script> 
var timeri = null; 
var el = null; 
function moveItRight() { 
if(parseInt(el.style.left) > (screen.width - 50)) 
wel.style.left = Q; 
el.style.left = parseInt(el.style.left) + 2 + 'px'; 
timeri = setTimeout (moveItRight, 25); 
} 
window.onload = function() { 
el = document.getElementById("divi"); 
el.style.left = '50px'; 
moveItRight(); 
} 
</script> 
</head> 
<body> 
<div id="divi">Move It!</div> 
</body> 
</html> 


先 来 看 看 moveItRight0 的 修改 情况 : 


function moveItRight() { 
if(parseInt(el.style.left) > (screen.width - 50)) el.style.left = 0; 
el.style.left = parseInt(el.style.left) + 2 + 'px'; 
timer1 = setTimeout(moveItRight, 25); 























XS BA A setTimeout( #252 AK, BERIT ETC 
素 向 右 移 动 2 个 像素 。 


函数 第 一 行 代码 : 


if(parseInt(el.style.left) > (screen.width - 50)) el.style.left = 0; 

















在 元 素 到 达 屏 幕 最 右 侧 时 把 它 重 新 移动 到 屏幕 最 左 侧 。 

利用 元 素 的 top 属 性 就 可 以 方便 地 设置 元 素 在 垂直 方向 的 位 置 ; 
el.style.top = parseInt(el.style.top) + 2 + 'px'; 
| Ea 


| right 属 性 值 是 从 元 素 容器 的 左 侧 开始 计算 的 ， 而 top 属 性 是 从 元 素 容器 的 上 边 开始 计算 
‖ 的。 在 程序 清单 15.1 的 范例 里 ， 元 素 容器 就 是 页 面 的 <body> 元 素 。 



















































































15.6 ”优化 性 能 


为 了 让 JavaScript 动 画 














15.6.1 ”使 用 单个 定时 器 

































































尽量 顺畅 ， 可 以 采取 如 下 一 些 方式 。 

































































































































































































































































使 用 多 个 定时 器 会 迅速 增加 CPU 的 占用 率 。 如 果 想 同时 实现 多 个 动 
画 ， 应 该 尝试 使 用 一 个 定时 器 控制 它们 。 
每 个 定时 器 都 会 导致 浏览 器 重 绘 一 个 或 多 个 屏幕 元 素 。 显 然 ， 如 果 
全 部 的 动画 元 素 只 进行 一 次 重 绘 ， 创 建 动画 效果 将 会 更 加 迅速 和 有 效 。 
15.6.2 ”避免 为 DOM 树 深层 次 的 元 素 创 建 动 画 效果 
元 素 在 DOM 树 里 的 层次 越 深 其 尺寸 和 位 置 所 影响 的 元 素 就 越 
多 。 这 样 的 元 素 在 创建 动画 效果 时 就 要 求 浏览 器 执行 更 多 的 计算 。 在 可 
能 的 情况 下 ， 尽 量 把 要 创建 动画 效果 的 元 素 直 接 附 加 到 <body> 元 素 或 比 
较 高 层 的 容器 。 
15.6.3 ”使 用 尽 可 能 低 的 帧 速率 
不 是 所 有 动画 都 需要 达到 电影 的 品质 ， 所 以 只 要 动画 的 品质 处 于 能 
够 接受 的 范围 ， 就 尽量 增加 延 时 的 时 间 。 
简单 动画 游戏 
现在 基于 程序 清单 15.1 编 写 一 个 JavaScript 游 戏 ， 把 动画 的 页 面 元 素 作为 目标 ， 让 用 户 
鼠标 来 尝试 “ 击 中 ” 它 。 
这 个 游戏 的 代码 如 程序 清单 15.2 所 示 。 
程序 清单 15.2 动画 射击 游戏 











<!DOCTYPE html> 
<html> 
<head> 
<title>Space Shooter</title> 
<style> 
#range { 





} 


position:absolute; 

top: Opx; 

left: Opx; 

background: url(space.jpg); 
cursor: crosshair; 

width: 100%; 

height: 300px; 


#img1 { 


position:absolute; 
border:none; 

left: Opx; 

top: 100px; 
padding: 10px; 

} 


#score { 


} 


font: 16px normal arial, verdana, sans-serif; 
color: white; 
padding: 10px; 


</style> 
<script> 


var 
var 
var 
var 


timeri = null; 

el = null; 

score = 0; // number of ‘hits' 
shots = 0; // total ‘shots 


function moveIt() { 


// animate the image 
if(parseInt(el.style.left) > (screen.width - 50)) 


wel.style.left = 0; 


el.style.left = parseInt(el.style.left) + 6 + 'px'; 
el.style.top = 100 + (80 * 


Math.sin(parseInt(el.style.left)/50)) + ‘px'; 


} 


// set the timer 
timer1 = setTimeout (moveIt, 25); 


function scoreUp() { 


} 


// increment the player's score 
scorett+; 


function scoreboard() { 


shots + " 


} 


// display the scoreboard 


document .getElementById("score").innerHTML = "Shots: 


Score: " + score; 


window.onload = function() { 


el = document.getElementById("img1"); 
// onClick handler calls scoreUp() 
// when the image is clicked 


+ 





el.onclick = scoreUp; 
// update total number of shots 
// for every click within play field 
document. getElementById("range").onclick = function() { 
shotst+; 
// update scoreboard 
scoreboard(); 
} 
// initialize game 
scoreboard(); 
el.style.left = '50px'; 
movelt(); 
} 
</script> 
</head> 
<body> 
<div id="range"> 
<div id="score"></div> 
<img alt="Fire!" id="imgi" src="ufo.gif" /> 
</div> 
</body> 
</html> 


动画 是 由 函数 movelt() 实 现 的 : 




















function moveIt() { 
if(parseInt(el.style.left) > (screen.width - 50)) el.style.left = 0; 
el.style.left = parseInt(el.style.left) + 6 + 'px'; 
el.style.top = 100 + (80 * Math.sin(parseInt(el.style.left)/50)) + 
='px'; 
timeri = setTimeout (moveIt, 25); 
} 


从 左 到 右 的 动画 的 实现 方式 与 程序 清单 15.1 是 完全 一 样 的， 但 添加 了 垂直 方向 的 变 











el.style.top = 100 + (80 * Math.sin(parseInt(el.style.left)/50)) + 'px'; 


这 个 动画 元 素 在 从 左 移 到 右 的 过 程 中 ，top 属 性 值 会 从 100-80=20(px) 变 化 到 
100+80=180(px)。 














“射击 "这 个 目标 是 通过 鼠标 点 击 实现 的 。 当 鼠标 位 于 id="rangev 的 <div> 元 素 里 时 ， 鼠 
标 指针 会 变 成 更 像 瞄 准 镜 的 十 字符 号 。 


当 动 画 元 素 上 检测 到 鼠标 点 击 时 ， 就 会 调用 函数 scoreUp()， 增 加 用 户 的 得 分 。 而 另 一 





















































个 函数 scoreboard0 显 示 总 的 “射击 ” 数 。 








这 个 游戏 如 图 15.1 所 示 。 
区 15listing02.html - Chromium | 
@ 15listing02.html 
€ C fi O file:///nome/phil/SAMS/15listingO2.Atm| ~wBouFfa 





{> 





图 15.1 动画 游戏 
利用 程序 清单 15.2 的 代码 创建 一 个 HTML 文 件 ， 其 中 的 背景 和 动画 图 像 可 以 按照 个 人 

































































意愿 使 用 进行 调整 。 当 浏览 器 里 加 载 这 个 文件 时 ， 会 看 到 UFO 《或 所 使 用 的 其 他 图 像 ) 在 
屏幕 上 跳动 。 

















修改 movelt0) 函 数 里 的 计算 方法 ， 观 察 动画 效果 会 有 什么 变化 。 尝 试用 鼠标 “射击 ” 目 
标 ， 查 看 记分 板 的 变化 。 























15.7 ”小结 


本 章 介 绍 了 利用 JavaScript 实 现 页 面 元素 动 画 的 技术 。 

















15.8 问答 
问 : 目前 有 哪些 浏览 器 支持 CSS 3 过 渡 、 转 换 和 动 
答 : 在 本 书 编写 时 ， 全 部 当前 常用 浏览 器 都 支持 2D 转 换 ， 而 
Safari、 Chrome/Chromium 和 Firefox 支 寺 3D 转 换 。IE1 0 会 支持 过 渡 和 3D 
变换 。 大 多 数 效果 都 具备 适当 退化 ， 比 即 使 使 用 不 支持 这 些 效果 的 浏 


日 


大 | 
览 器 也 没有 问题 ， 只 是 看 不 到 元 素 的 动画 效果 。 


画 ? 




















一 | 























































































































Rr E. 


问 : setTimeout() 和 setInterval0) 里 延 时 的 精确 度 是 多 少 ? 


答 : 不 是 很 精确 。 ena ae 这 意味 着 像 
定时 器 这 样 的 异 ; 事件 必须 等 待 解释 器 空闲 时 间 才 能 运行 。 如 果 定 时 器 
到 时 间 不 能 运行 ， 它 前 会 等 到 全 执行 的 时 候 ， 也 就 延长 了 间隔 时 间 。 






























































15.9 ”作业 


请 先 回答 问题 ， 再 




















i 


看 后 面 的 答案 。 

















15.9.1 测验 
1. 预 加 载 图 像 能 够 改善 页 面 的 显示 速度 ， 是 因为 : 
a. 在 图 像 下 载 之 前 压缩 图 像 
b. 在 页 面 需要 之 前 下 载 图 像 
c. 调整 图 像 尺寸 
2. 对 页 面 元 素 el 的 垂直 位 置 创 建 动画 效果 ， 需 要 改变 ; 





























































































































a. el.style.top 
b. el.top 
c. el.vertical 


3. CSS 样 式 的 哪个 属性 决定 了 页 面 元 素 的 透明 度 ? 


























a. transparency 
b. alpha 
c. opacity 
15.9.2 ”答案 
1. ib. ZEAE ZH FARE 
2. ita. 


3. 选 c。opacity 是 CSS 样 式 属性 。 
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15.10 ”练习 


而 
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修改 程序 清单 15.2 的 代码 ， 让 目 














不 是 简单 地 从 左 移 到 右 。 同 时 ， 








x 











标 图 像 在 垂 





























和 水 ” 
把 JavaScript 和 CSS 





“方向 都 晃动 ， 
提取 到 外 部 文 














尝试 修改 代码 ， 添 加 第 





a 











标 











图 像 ， 使 








有 不 














同 的 运动 模式 。 














解决 Ajax 问题 


第 16 章 Ajax 入 门 


本 章 主 要 内 容 包 括 : 


向 
处 


Ajax 应 用 程序 解析 
Ajax 应 用 程序 的 组 成 
XMLHttpRequest 对 象 的 功能 


















































及 务 器 发 送 消息 
里 服务 器 响应 














JavaScript 是 客户 端 脚本 语言 ， 本 书 前 面 介 














。 而 Ajax《〈 也 被 称 为 远程 脚本 ) 可 [以 访问 服务 器 端 程序 ， 在 客户 端 




















里 使 用 它们 的 功能 。 














绍 的 全 部 范例 都 是 客户 端 









































0 部 分 就 来 介绍 如 何 创建 和 部 署 Ajax 应 

















程序 。 


16.1 Ajax 解析 
到 目前 为 止 ， 我 们 介绍 的 都 是 关于 站 点 用 户 界 面 的 传统 页 面 模型 。 
在 用 户 与 这 种 站 扣 互 动 时， 每 个 页 面包 含 文本 、 图 像 、 数 据 输 入 表单 
等 ， 依 次 展现 。 每 个 页 面 都 得 单独 处 理 ， 才 能 跳 转 到 下 一 个 页 面 。 


举例 来 说 ， 在 填写 表单 的 字段 时 ， 我 们 会 根据 需要 进行 编辑 ， 因 为 
知道 在 最 终 提交 之 前 ， 数 据 不 会 被 发 送 到 服务 器 。 


图 16.1 展 示 了 这 种 互动 过 程 。 










































































































































































时 间 





16.1 传统 的 客户 端 /服务 器 交互 






































在 提交 表单 或 点 击 链接 之 后 ， 浏 览 器 要 进行 屏幕 刷新 ， 才 能 显示 

















服务 器 发 送 的 新 页 面 或 修改 后 的 页 面 。 
























































符合 这 种 模型 的 交互 具有 一 些 缺点 。 首 先 ， 每 个 新 页 面 或 修改 页 再 






































~ 
Tihs o 





时 恶 





的 加 载 都 会 有 









































“整个 "页面 。 站 点 eae 

















使 新 页 面 与 前 一 个 页 面 





j 户 对 于 应 用 程序 


的 内 容 几 乎 是 相 





流畅 ”运行 的 感 


同 的 ， 每 次 也 都 需 












































上 述 问题 





























的 共同 元 素 ， 比 如 标题 、 面 脚 、 导 








的 比例 。 


















































程序 。 对 于 桌 


显示 内 容 仍然 


16.1.1 Ajax 入 门 





Ajax 能 够 实现 上 述 在 桌 
与 服务 器 之 间 建 立 了 一 个 额外 的 : ‘处 理 层 


面 程序 ， 我 们 希望 耗 时 



































保留 在 屏幕 上 ， 界 面 元 素 依旧 能 对 |p 





必要 的 数据 下 载 会 浪费 带宽 ， 而 且 会 使 每 个 新 页 面 的 加 载 延 


















































页 的 组 合 结果 会 让 用 户 访问 站 点 的 体验 明显 差 于 大 多 数 桌 面 


的 计算 过 程 在 后 





























台 安 静 地 运行 ，1 
的 指令 产生 响应 。 











局 

















相应 用 程 




















这 个 “处 理 
请 求 ， 在 后 台 以 异步 方式 “安静 ”地 处 
操作 ， 服 务 器 请 求 与 响应 不 再 需要 同步 一 致 了 ， 
或 程序 正确 操作 需要 时 才 发 生 ; 浏览 器 不 会 停止 响应 3 
最 后 一 个 请 求 的 处 理 ， 而 是 会 允许 JP ÆR 


























层 ， ,通常 被 称 为 Ajax 引擎 或 Ajax 框架 。 它 解释 来 自 用 户 的 


齐 中 很 常见 的 功能 ， 





它 在 Web 页 面 
































里 服务 器 通 







































































面 上 需 





























A WA 

















oJ} 














要 根据 服务 器 响应 进行 修 

















j 状 态 过 程 中 动态 进行 的 。 


16.2 是 这 种 交互 方式 的 示意 。 




























































































浏览 、 点 击 和 输入 数 


Ajax 处 理 ， 这 是 在 














时 间 











16.2 Ajax 客户 端 /服务 器 交互 





16.1.2 ”XMLHttpRequest 对 象 


当 用 户 点 击 页 面 上 的 链接 或 是 提交 一 个 表单 时 ， 就 向 服务 器 发 送 了 
一 个 HTML 请 求 ， 得 到 的 响应 是 一 个 新 页 面 或 修改 过 的 页 面 。 然 而 ， 为 
了 能 让 Web 程 序 实现 异步 工作 ， 必 须 使 用 一 种 方式 给 服务 器 发 送 HTTP 
请 求 而 不 必 显 示 :新 页 H| o 


利用 XMLHttpRequest 对 象 就 可 以 实现 这 种 方式 。 它 能 够 建立 与 服 
务 器 的 连接 ， 发 送 HTTP 请 求 而 不 需要 显示 相应 的 页 面 。 


稍 后 将 介绍 如 何 实例 化 XMLHttpRequest 对 象 ， 利 用 它 给 服务 器 发 
送 请 求 。 


出 于 安全 的 考虑 ， a - 般 只 5 当前 页 面 同一 个 域 里 的 URL， 而 
不 能 直接 调用 远程 服务 器 

















































































































































































































16.1.3 与 服务 器 通信 




















在 传统 Web 页 面 模型 里 ， 
器 发 出 一 个 请 求 时 ， 





Hy} Pett 





























RS 





Tea 














过 链接 或 提交 


























当 用 
服务 器 接收 请 求 ， HEAT 3 














在 这 个 过 程 中 ， 用 户 界面 是 “锁定 ” 

















了 新 页 面 或 修改 后 的 页 面 时 ， 才 会 知 记 























然而 ， 在 使 用 异步 服务 器 请 求 时 ， 
屏幕 刷新 或 加 载 新 
于 请 求 的 处 理 


提供 了 一 个 属性 ， 方 便 





的 处 理 过 程 不 必 与 
的 方式 来 了 解 服务 器 对 


XMLHttpRequest 对 象 
































请 求 的 处 理 情 况 。 利 用 JavaScript 就 可 























完成 了 工作 






















































































使 用 处 理 后 的 结果 。 










































































我 们 了 解 服务 器 对 于 
以 查看 这 个 属性 ， 判 断 服 务 器 何 时 


表单 的 方式 向 服务 
的 服务 器 端 处 理 ， 


然后 


4 有 当 我 们 看 到 浏览 器 显示 
服务 器 完成 了 它 的 工作 。 

重信 是 在 后 台 发 生 
面 同步 ， 所 以 我 们 必须 利 


， 请 求 
1 Ib 





为 此 ，Ajax 体 系 里 必 veal 求 状 态 并 进行 相应 操作 的 例 程 ， 








这 方面 的 内 容 稍 后 会 有 详细 介 

















16.1.4 ”服务 器 端 


从 服务 器 端的 及 
个 HTTP 请 求 。 Ajax 程序 个 关 ， ieee 
于 什么 操作 系统 ， 只 要 客户 端 
格式 正确 的 HTTP 响 应 ， 











本 来 考虑 ， 来 自 XMLHttpRequest 对 象 
j Pa J 什么 语 Wwe A 

















16.1.5 AbH 





服务 器 响应 











的 信息 。 








Ajax 允许 


根据 程序 的 用 途 ， 
式 处 理 这 些 信息 。 


16.1.6 总结 


在 确定 异步 请 求 已 经 被 成 功 处 理 之 后 ， 我 们 就 可 以 使 / 














一 切 就 能 正常 





以 多 种 格式 返 










































































的 通信 也 是 
或 是 处 






































j 服 务 器 返 


才 地 收 到 来 服务 器 庙 的 








a 











言 息 ， 包 括 ASCII 文 本 和 XML 数据 。 




















我 们 就 有 转换 、 





























显示 或 以 其 





他 方 























假设 我 们 要 设置 一 个 新 的 Ajax 程序 ， 或 是 要 给 现 有 的 Web 应 用 添加 
Ajax 技术 ， 需 要 怎么 做 呢 ? 


首先 ， 要 确定 哪些 页 面 事件 和 用 户 操 作用 来 触发 异步 HTTP 请 求 。 
举例 来 说 ， 可 能 是 图 像 的 onMouseOver 事 件 触发 请 求 ， 让 服务 器 返回 关 
pea 更 更 多 信 言 息 ; 或 是 按钮 的 onClick 事 件 触发 请 求 ， 获 得 填充 表单 字 




































































































































































SS 











书 中 前 面 已 经 介绍 了 如 何在 JavaScript 里 使 用 事件 处 理 器 在 特定 情 
下 执行 指令 。 而 在 Ajax 应 用 里 ， 仍 然 要 使 用 这 样 的 方法 通过 
XMLHttpRequest 启 动 异步 HTTP 请 求 。 































































































































































































在 发 出 请 求 之 后 ， 需 要 编写 程序 来 监视 处 理 过 程 ， 直 到 从 服务 器 获 
知 这 个 请 求 已 经 处 理 完成 。 

最 后 ， 在 得 知 服务 器 已 经 完成 处 理 之 后 ， 需 要 一 个 程序 来 接收 从 服 
务 器 返回 的 信息 并 且 应 用 到 我 们 的 程序 里 。 

图 16.3 展 示 了 上 述 整 个 流程 。 

















“Ajax 引擎 一 










XMLHTTPRequest 


创建 服务 
器 请 求 服务 器 


[sa | 
= 












请 求 


readyState 





response 





























16.3 Ajax 应 用 程序 的 各 个 组 件 如 何 配合 工作 








16.2 XMLHttpRequest 对 象 


JL 


这 个 对 象 的 用 途 是 让 JavaScript 构 造 HTTP 请 求 3 


乎 全 部 现代 浏览 器 都 支持 XMLHttpRequest 对 








象 。 






































































































































提交 给 服务 器 ， 这 


样 页 面 就 能 够 以 异步 方式 在 后 台 产 生 请 求 ， 让 用 户 可 以 继续 使 用 这 个 页 
面 ， 而 不 必 等 待 浏览 器 刷新 或 加 载 新 的 页 面 。 

这 个 功能 是 任何 Ajax 应 用 程序 的 基础 ， 也 让 XMLHttpRequest 对 象 成 
为 Ajax 编 程 的 关键 。 
i 


虽然 这 个 对 象 的 名 称 是 以 “XML” 开 头 的 ， 但 服务 器 实际 上 可 能 返 














如 ASCII 文 本 、HTML 或 XML。 


= 
w 
z 
peas 
ve 
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16.3 ”创建 XMLHttpRequest 的 实例 


必须 先 创建 XMLHttpRequest 的 实例 ， 然 后 才能 使 用 它 。 从 本 书 前 
面 的 介绍 可 以 知道 ， 在 JavaScript 里 创建 对 象 实 例 一 般 就 是 调用 对 象 的 构 
造 器 。 然 而 XMLHttpRequest 有 少许 不 同 ， 因 为 要 适应 不 同 浏览 器 的 需 


Be 
Ho 




























































































16.3.1 不 同 浏览 器 的 不 同 规则 


我 们 不 能 预测 用 户 会 使 用 什么 浏览 器 、 什 么 版 本 、 什 么 操作 系统 ， 
所 以 代码 必 \ 须 在 运行 时 根据 情况 进行 调整 ， 才 能 确保 成 功 创建 
XMLHttpRequest 对 象 。 


对 于 大 多 数 本 身 支 持 XMLHttpRequest 对 象 的 浏览 器 〈 比 如 Firefox、 
Opera 以 及 较 新 版 本 的 了 正 ) 来 说 ， 创 建 它 的 实例 是 很 直接 的 ， 比 如 下 面 
这 个 语句 就 会 创建 名 为 request 的 实例 : 
var request = new ea tt 


在 一 些 早期 版 本 的 正 里， 为 了 达到 同样 的 目的 ， 需 要 创建 一 个 
ActiveX 对 象 ， 如 下 所 示 : 


var request = new ActiveXObject("Microsoft.XMLHTTP"); 
与 前 面 一 样 ， 这 也 是 把 新 对 象 的 名 称 设置 为 request。 


更 复杂 的 是 ， 有 些 IE 版 本 安装 了 不 同 版 本 的 XML 解 析 器 ， 这 时 就 要 
使 用 如 下 的 指令 : 


var request = new ActivexObject("Msxml2.XMLHTTP") ; 
16.3.2” 跨 浏览 器 的 解决 方案 
为 了 在 各 种 浏览 器 上 都 正确 创建 XMLHttpRequest 的 实例 ， 可 以 利 


功能 检测 让 脚本 依次 尝试 不 同 的 创建 方式 ， 直 到 成 功 为 止 。 程 序 清单 
16.1 展 示 了 这 种 策略 。 


es 


















































































































































































































































程序 清单 16.1 跨 浏览 器 创建 XMLHttpRequest 对 象 





function getXMLHttpRequest() { 


try { 
try { 
return new ActivexXObject("Microsoft.XMLHTTP") ; 
} 
catch(e) { 
return new ActivexXObject("Msxm12.XMLHTTP") ; 
} 
} 
catch(e) { 
return new XMLHttpRequest () ; 
} 
} 
在 这 个 范例 里 ， 首 先 尝 试 
































new ActivexObject("Microsoft.XMLHTTP" ) 

如 果 它 失败 了 ， 再 尝试 

new ActiveXObject("Msxml2.XMLHTTP") ; 
来 判断 是 否 要 使 用 ActiveX 方 法 来 创建 XMLHttpReguest 对 象 。 如 果 


上 述 两 种 方式 都 失败 了 ， 那 么 就 说 明 浏 览 器 使 用 的 是 
XMLHttpRequest， 所 以 就 可 以 使 用 构造 器 : 


new XMLHttpRequest(); 


这 样 就 可 以 创建 XMLHttpRequest 实 例 了 。 
现在 如 果 要 亿 
数 : 
















































































= 





建 XMLHttpRequest 对 象 ， 就 可 以 像 下 面 这 样 调用 函 








var myRequest = getXMLHttpRequest(); 
16.3.3 ”方法 和 属性 

































































































































































































































































在 创建 了 XMLHttpRequest 对 象 之 后 ， 现 在 来 看 看 它 的 属性 和 方 
法 ， 如 表 16.1 所 示 。 
表 16.1 XMLHttpRequest 对 象 的 属性 和 方法 
属性 描述 
onreadystatechange 当 对 象 的 readyState 属 性 改变 时 ， 调 用 哪个 事件 处 理 器 
以 整数 形式 反映 请 求 的 状态 
0= an 
1= 正 在 加 载 
readyState 2= 加 载 完 成 
3= 交 互 
4= 完 成 
responseText 以 字符 串 形式 从 服务 器 返回 的 数据 
responseXML 以 文档 对 象形 式 从 服务 器 返回 的 数据 
status 民 务 器 返回 的 HTTP 状 态 代码 
statusText 民 务 器 返回 的 解释 短语 
HE 描述 
abort() 停止 当前 请 求 
getAllResponseHeaders() | 以 字符 串 形式 返回 全 部 标题 
getResponseHeader(x) ”| 以 字符 串 形式 返回 标题 x 的 值 
E , un | 指定 HTTP 方 法 (GET 或 POST) 、 目 标 URL 和 处 理 请 求 的 
se 方式 (a=true, BRU, RATA; a=false, RAIA) 
send(content) 发 送 请 求 。 对 于 POST 数据 是 可 选 的 
人 P Osy) ， 把 它 赋予 与 请 求 一 起 发 送 的 标 
在 接 下 来 的 几 章 里 ， 我 们 将 介绍 如 何 使 用 这 些 方法 和 属性 建立 函 
数 ， 最 终 构 成 我 们 Ae, 
现在 先 来 介绍 其 中 一 些 方法 。 
16.3.4 open() 方 法 
open() 方 法 让 XMLHttpRequest 对 象 做 好 与 服务 器 通信 的 准备 ， 它 需 
要 至 少 两 个 参数 : 
。 需要 指定 要 使 用 的 HITP 方 法 ， 通 常 是 GET 或 POST。 


















































。 请 求 的 目标 URL。 如 果 是 使 用 GET 类 型 的 请 求 ，URL 需 要 进行 适当 
的 编码 ， 其 中 要 包含 全 部 的 参数 及 其 值 。 


出 于 安全 的 考虑 ，XMLHttpRequest 对 象 只 允许 与 自己 所 在 域 的 
o 言 。 如 果 尝 试 与 远程 域 进行 连接 ， 会 得 到 “拒绝 许可 ”的 错误 
YH. 



































































































































常见 的 背 误 是 从 域 www.example.com 调 域 example.com。 对 于 JavaScript 解 析 器 来 说 ， 这 
是 两 个 不 同 的 域 ， 是 不 允许 连接 的 。 


还 有 第 三 个 可 选 参数 ， 这 是 个 布尔 值 ， 表 示 请 求 是 否 以 异步 方式 发 送 。 如 果 设 置 为 false， 
请 求 就 不 会 以 异步 方式 发 送 ， 页 面 就 会 在 请 求 完成 之 前 保持 锁定 状态 。 如 果 不 设置 这 个 参 
数 ， 默 认 值 是 rue， 表 示 请 求 以 异步 方式 发 送 。 











16.3.5 ”send() 方 法 


在 使 用 open() 方 法 准备 好 XMLHttpRequest 对 象 之 后 ， 就 可 以 利 
send() 方 法 发 送 请 求 了 。 它 接收 一 个 参数 。 


如 果 请 求 使 用 的 方式 是 GET， 那 么 请 求 的 内 容 就 必须 编码 到 目标 
URL， 然 后 调 send0 方 法 时 就 可 以 使 用 参数 null: 


objectname.send(null) ; 
如 果 发 送 POST 请 求 ， 请 求 的 内 容 〈 也 需要 适当 编码 ) 会 以 参数 方 
式 传 递 给 send() 方 法 : 


objectname.setRequestHeader( 'Content-Type', ‘application/ 
=x -www-form-urlencoded' ); 
objectname.send(vari=value1&var2=value2) ; 


本 例 中 使 用 setRequestHeader 方 法 表明 要 包含 哪 类 的 内 容 。 
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16.4 发送 服 务 器 请 求 


现在 就 要 来 编写 一 个 函数 callAjax()， 利 用 XMLHttpRequest 对 象 给 
服务 器 发 送 异 步 请 求 。 





























function callAjax() { 
// declare a variable to hold some information to pass to the server 
var lastname = 'Smith'; 
// build the URL of the server script we wish to call 
var url = “myserverscript.php?surname=" + lastname; 
// ask our XMLHttpRequest object to open a server connection 
myRequest.open("GET", url, true); 


// prepare a function responseAjax() to run when the response has 
arrived 


myRequest.onreadystatechange = responseAjax; 
// and finally send the request 
myRequest.send(null) ; 








第 一 行 相当 简单 ， 就 是 声明 一 个 变量 ， 给 它 赋予 一 个 值 : 


var lastname = ‘Smith' 











这 是 函数 要 发 送 给 服务 器 的 一 部 分 信息 ， IR ai 本 里 有 有 一 个 变 
量 sumame 要 使 用 这 个 值 。 当 然 ， 在 实际 情况 中 ， 这 个 值 通常 是 通过 像 


鼠标 点 击 或 键盘 输入 这 样 的 页 面 事件 动态 获得 的 ， 但 在 此 这 个 值 对 于 我 
们 的 范例 已 经 足够 了 。 










































































我 们 要 发 送 的 请 求 是 GET 类 型 的 ， 所 以 必须 把 “参数 = 值 ” 对 适当 地 
编码 并 附加 到 目标 URL 的 末尾 ， 就 像 下 面 这 样 : 

















var url = "myserverscript.php?surname=" + lastname; 
接着 使 用 open() 方 法 准备 服务 器 请 求 : 
myRequest.open("GET", url, true); 


这 一 行 指 定 了 请 求 是 GET 类 型 的 ， 并 且 向 open0 传 递 包含 参数 的 完 
HURL. 





















































第 三 个 参数 true 表 示 这 个 请 求 要 以 异步 方式 发 送 。 在 本 例 的 情况 
下 ， 这 个 参数 可 以 忽略 ， 因 为 默认 值 就 是 tue。 当 然 ， 明 确 地 设置 这 个 
参数 可 以 让 代码 更 清晰 。 
































下 来 ， 我 们 要 


象 ， 包 含 了 当 
行 代码 里 : 









































myRequest.onreadystatechange 


我 1 














处 理 浏览 器 缓存 








门 让 函数 responseAjax(0) 来 进行 处 理 。 





















































任何 浏览 














都 维护 着 访问 页 面 的 “缓存 ”， 


稍 后 我 们 再 





告诉 XMLHttpRequest 对 象 myRequest 如 何 处 理 从 服 
的 进度 报告 。XMLHttpRequest 对 象 有 
服务 器 状态 变化 时 应 该 调 


| 个 onreadystatechange 对 
哪个 JavaScript 函 数 。 在 下 














TPES 








responseAjax; 























也 就 是 页 面 




















所 在 计算 机 硬盘 上 的 存储 。 





当 用 户 请 求 访 问 特定 Web 页 国 
































先 会 尝试 从 缓存 里 加 载 页 


虽然 这 种 方式 可 能 对 


面 ， 而 不 是 立即 提交 新 
于 缩短 页 面 加 载 时 间 有 些 好 处 ， 




















Ajax 程序 制造 了 困难 。 因 
重新 加 载 信息 。 当 我 们 


成 一 个 新 的 HTTP 请 求 。 


















































rGAjax zE 


向 服务 器 发 出 


3t 




















编写 这 个 函数 。 


内 容 在 浏览 器 
时 ， 浏 览 器 























的 HTTP 请 求 。 


但 它 给 编写 























与 服务 器 通信 的 ， 








而 不 是 从 缓存 











AR 





步 请 求 时 ， 





解决 这 个 问题 的 一 种 常见 技巧 是 在 请 求 数 拉 

















要 求 每 次 都 生 


居 里 添加 一 个 参数 ， 给 它 








赋予 一 个 随机 的 无 总 
AK 

















只 要 URL 里 的 
个 发 给 


JavaScript 里 利 


























SXR. A 
FAE A EE 


随机 内 容 每 次 都 是 不 一 样 
成 一 个 新 的 HTTP 请 求 。 


生成 随机 数 ， 现 


新 地 址 的 请 求 ， 从 而 生 


Math.random()77 #3 














E 使 
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16.24 








实现 这 种 方法 。 程 











有 对 callAjax0 函 数 进行 


GET 请 求 时 ， 这 就 意味 3 


的 ， 就 能 让 浏览 

















了 








程序 清 














16.2 使 











着 要 在 URL 








觉得 这 是 





在 来 看 看 如 何 





点 修改 。 


随机 数 解决 缓存 问题 


function getXMLHttpRequest() { 


try { 
try { 
return new ActivexObject("Microsoft.XMLHTTP") ; 
} 
catch(e) { 
return new ActivexObject("Msxml2.XMLHTTP") ; 
} 
} 
catch(e) { 


return new XMLHttpRequest () ; 


var myRequest = getXMLHttpRequest() ; 


function callAjax() { 
// declare a variable to hold some information to pass to the serve 


var lastname = 'Smith'; 
// build the URL of the server script we wish to call 
var url = "myserverscript.php?surname=" + lastname; 


// generate a random number 

var myRandom=parseInt (Math. random( )*99999999) ; 

// ask our XMLHttpRequest object to open a server connection 

myRequest. open("GET", url + "&rand=" + myRandom, true); 

// prepare a function responseAjax() to run when the response has 
arrived 

myRequest.onreadystatechange = responseAjax; 

// and finally send the request 

myRequest.send(null) ; 


有 些 程序 员 喜 欢 使 用 当前 时 间 而 不 是 随机 数 ， 也 就 是 使 用 当前 日 期 和 时 间 组 成 的 字符 
串 。 下 面 的 代码 使 用 Date 对 象 的 getTime() 方 法 : 


... + "&myRand =" + new 
Date().getTime(); 
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从 程序 清单 16.2 可 以 看 出 ， 它 生成 的 目标 URL 是 这 种 形式 的 : 











myserverscript.php?surname=Smith&rand=XXXX 











其 中 的 XXXX 是 某 个 随机 数 ， 从 而 避免 了 浏览 器 从 缓存 读 取 页 面 ， 
而 是 生成 一 个 新 HTTP 请 求 发 送 给 服务 器 。 














16.5 ”监视 服务 器 状态 


在 Ajax 请 求 被 发 送 到 服务 器 之 后 ， 我 们 需要 监视 它 的 处 理 过 程 ， 特 
别 是 请 求 何 时 处 理 完 成 以 及 是 否 完成 成 功 。 



































XMLHttpRequest 对 象 提供 了 一 些 手 段 来 提供 这 些 信息 。 














16.5.1 readyState 属 性 























这 个 属性 反映 了 从 服务 器 返回 的 关于 请 求 状 态 的 信息 
onreadystatechange 属 性 会 监视 这 个 属性 ， 后 者 的 变化 会 导 至 前 者 的 值 变 
为 tue， 从 而 导致 执行 指定 的 函数 〈 范 例 里 是 responseAjax0O) 。 












































提示 : 


























当 服 务 器 请 求 完 成 之 后 调用 的 函数 通常 被 称 为 “< 回调 函数 ”。 
readyState 属 性 的 值 包括 : 























6= 未 初始 化 
1= 正 在 加 载 
2= 加 载 完成 
3= 交 互 
4= 完 成 

















当 第 一 次 提交 请 求 时 ，readyState 的 值 是 0， 表 示 "“ 未 初始 化 ”。 


当 服 务 器 开始 处 理 请 求 时 ， 服 务 器 把 数据 加 载 到 XMLHttpRequest 
对 象 ，readyState 属 性 值 相应 地 变 成 1， 再 变 成 2。 























当 readyState 的 值 变 为 3 时 ， 含 义 是 “交互 >， 表 示 对 象 已 经 得 到 充分 
处 理 ， 可 以 与 之 进行 一 定 的 交互 ， 但 是 并 没有 彻底 处 理 完 。 


当 服 务 器 请 求 彻底 处 理 完成 时 ， 这 个 对 象 能 够 进行 下 一 步 处 理 了 ， 
readyState 属 性 的 值 最 终 变 成 4。 













































































在 大 多 数 情 况 下 ， 我 们 要 等 到 readyState 属 性 的 值 变 成 4， 从 而 确定 









































e 己 经 完成 操作 ， 而 且 我 们 可 以 进一步 处 理 XMLHttpRequest 对 





| 对 于 特定 对 象 来 说 ， 并 不 是 上 述 所 有 可 能 值 都 会 出 现 的 。 
16.5.2 服务 器 响应 状态 代码 
除了 使 用 readyState 属 性 外 ， 还 可 以 通过 另外 一 种 方式 查看 异步 请 


求 的 执行 状态 : HTTP 服务 器 响应 状态 代码 ， 比 如 “200” 表 示 “OK”( 在 
后 面 介绍 回调 函数 时 会 介绍 如 何 使 用 这 种 代码 〉。 




























































































16.6 ”回调 函数 

到 目前 为 止 ， 我 们 介绍 了 如 何 创建 XMLHttpRequest 对 象 的 实例 ， 
声明 回调 函数 ， 准 备 并 且 发 送 异 步 服务 器 请 求 ， 还 说 明了 根据 哪个 属 必 
判断 服务 器 已 经 完成 响应 了 。 

现在 来 看 看 回调 函数 responseAjax()。 


首先 要 注意 的 是 ，onreadystatechange 属 性 的 值 每 次 改变 时 ， 都 会 调 
这 数 情况 下 ，readyState 属 性 的 值 不 是 4， 表 示 服 务 器 还 没 
有 完成 处 理 ， 因 此 调用 这 个 函数 时 不 需要 让 它 进行 任何 操作 。 
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HF 





















































































































































function responseAjax(){ 
//we are only interested in readyState of 4, i.e. "completed" 


if (myRequest.readyState==4){ 
-执行 语句 .… 
} 














另外 ， 为 了 达到 双重 保险 的 目的 ， 我 们 还 可 以 查看 HTTP 响 应 状态 
代码 ， 确 定 它 的 值 是 200， 表 示 服 务 器 成 功 响 应 了 异步 HTTP 请 求 。 


























参考 表 16.1， 可 以 看 到 XMLHttpRequest 对 象 有 两 个 属性 报告 HTTP 
RÆ: myRequest.status 包 含 状态 响应 代码 ， 而 myRequest.statusText 包 含 
状态 短语 。 


我 们 可 以 利用 更 复杂 的 判断 来 发 挥 这 些 




















EZ 






































性 的 作用 : 











Wl 























function responseAjax(){ 
//we are only interested in readyState of 4, i.e. "loaded" 
if (myRequest.readyState==4) { 
// if server HTTP response is"OK" 
if (myRequest.status==200) { 
m PATHA.. 
} else { 
// issue an error message for any other HTTP response 
alert("An error has occurred: "+myRequest.statusText); 





























只 要 服务 器 状态 不 是 “200”， 就 会 执行 else 子 句 ， 从 而 显示 一 个 提示 
对 话 框 ， 其 中 包含 从 服务 器 返回 的 状态 短语 。 








16.7 responseText#llresponseXML 属性 





一 旦 服务 器 请 求 完 成 ， 也 就 是 检测 到 


myRequest.readyState == 4 





































































































responseText 和 responseXML 属 性 就 会 包含 从 服务 器 返回 的 数据 ， 分 
别 是 文本 格式 和 XML 格 式 。 

稍 后 我 们 将 介绍 如 何 访问 这 些 信息 并 用 于 Ajax 程序 。 
16.7.1 ”responseText 属 性 

这 个 属性 以 文本 形式 表示 从 服务 器 返回 的 信息 。 

如 果 XMLHttpRequest 调 用 失败 ， 或 是 还 没有 发 送 请 求 ，responseText 属 性 的 值 是 null。 


























修改 前 面 的 范例 代码 ， 在 表示 服务 器 完成 响应 的 让 语句 里 添加 代 
码 ， 如 程序 清单 16.3 所 示 。 











程序 清单 16.3 ”查看 responseText 属 性 的 值 


function responseAjax() { 
// we are only interested in readyState of 4, i.e. "loaded" 
if (myRequest.readyState == 4) { 
// if server HTTP response is "OK" 
if(myRequest.status == 200) { 
alert("The server said: " + myRequest.responseText) ; 


} else { 
// issue an error message for any other HTTP response 
alert("An error has occurred: " + myRequest.statusText) ; 
} 
} 
} 
提示 : 


responseText 属 性 是 只 读 的 。 
这 个 简单 的 范例 打开 一 个 警告 框 来 显示 服务 器 返回 的 文本 。 
假设 服务 器 使 用 如 下 一 个 简单 的 PHP 文 件 : 
<?php echo "Hello Ajax caller!"; ?> 


如 果 XMLHttpRequest 成 功 地 调用 了 这 个 文件 ，responseText 属 性 里 




















TF 

































































就 会 包含 字符 串 “Hello Ajax caller”, JM TLE EN žE kin B 16.4 所 示 
的 对 话 框 。 























7 JavaScript Alert 


| Hello Ajax caller! 
aoe 











图 16.4 程序 清单 16.3 的 输出 结果 























responseText 属 性 包含 的 是 字符 串 ， 因 此 我 们 可 以 用 JavaScript 与 字 
符 串 相关 的 方法 对 其 进行 操作 

















16.7.2 responseXML 属性 


现在 假设 在 服务 器 上 使 用 的 PHP 脚 本 如 程序 清单 16.4 所 示 。 
程序 清单 16.4 “ 另 一 段 服务 器 端 脚本 
































<?php 
header('Content-Type: text/xml'); 

echo "<?xml version=\"1.0\" ?><greeting>Hello Ajax caller!</greeting>"; 
?> 





这 段 PHP 脚 本 输出 一 个 简单 但 很 完整 的 XML 文档 
<?xml version="1.@" ?> 
<greeting> 

Hello Ajax caller! 
</greeting> 


当 服 务 器 调用 完成 之 后 ， 这 个 XML 文档 就 会 保存 在 responseXML 属 
里 。 需 要 说 明 的 是 ， 这 个 属性 不 像 responseText 那 样 只 保存 文本 ， 而 
包含 XML 文档 的 全 部 数据 与 结构 。 
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ap 践 
Ajax 时 钟 


现在 来 编写 一 个 简单 的 Ajax 程序 ， 显 示 从 服务 器 获得 的 时 间 ， 与 本 地 计算 机 的 时 间 进 
行 比较 。 























使 用 很 简单 的 PHP 脚 本 就 能 从 服务 器 获得 时 间 ，clock.php 只 包含 如 下 一 行 代码 ; 
1 LJ 7 a 1 a 

<?php echo date('H:1i:s'); ?> 

它 会 以 < 时 : 分 : 秒 ” 的 形式 返回 服务 器 时 间 ， 比 如 “12:35:44”。 


利用 JavaScript 以 同样 格式 获取 本 地 计算 机 的 时 间 : 


var localTime = now.getHours() + ":" + now.getMinutes() + ":" + 
=now.getSeconds(); 


















































程序 清单 16.5 展 示 了 完整 的 JavaScript 文 件 。 它 与 程序 清单 16.2 很 相似 ， 只 是 Ajax 调 
的 目标 变 成 了 clock.php， 调 用 时 也 没有 参数 ， 只 包含 为 了 解决 缓存 问题 而 使 用 的 随机 数 。 
























































程序 清单 16.5 ajax.js 





function getXMLHttpRequest() { 
try { 
try { 
return new ActivexObject("Microsoft.XMLHTTP") ; 


} 
catch(e) { 


return new ActivexObject("Msxml2.XMLHTTP") ; 


} 
catch(e) { 


return new XMLHttpRequest(); 


} 
function callAjax() { 
var url = "clock.php"; 
var myRandom = parseInt(Math.random()*99999999) ; 





myRequest. open("GET", url + "?rand=" + myRandom, true) ; 
myRequest.onreadystatechange = responseAjax; 
myRequest.send(null) ; 
} 
function responseAjax() { 
if (myRequest.readyState == 4) { 
if (myRequest.status == 200) { 
var now = new Date(); 


var localTime = now.getHours() + ":" + now.getMinutes() + ": 


w+ now.getSeconds(); 
var serverTime = myRequest.responseText; 
document. getElementById("clock").innerHTML = "Server: " + 


wserverTime + "<br />Local: " + localTime; 
} else { 
alert("An error has occurred: " + myRequest.statusText) ; 
} 
} 
} 


var myRequest = getXMLHttpRequest() ; 


相应 的 HTML 文 件 如 程序 清单 16.6 所 示 ， 其 中 使 用 的 JavaScript 仅 
附加 到 按钮 的 onClick 事 件 处 理 器 。 


















































于 把 callAjax() 函 数 














程序 清单 16.6 ”Ajax 时 钟 的 HTML 





<!DOCTYPE html> 


<html> 
<head> 
<title>Ajax Clock</title> 
<style> 
#clock { font: 32px normal verdana, helvetica, sans-serif; 
</style> 
<script src="ajax.js"></script> 
<script> 
window.onload = function() { 
document. getElementById("btni").onclick = callAjax; 
} 
</script> 
</head> 
<body> 


<input id="btn1" type="button" value="Get Time" /><br /> 
<div id="clock"></div> 

</body> 

</html> 


在 请 求 处 理 成 功 之 后 ， 回 调 函数 responseAjax(0) 构 造 一 小 段 HTML 人 代码， 包含 服务 器 时 
间 与 本 地 时 间 ， 并 利用 innerHTML 方法 放 到 id=clock 的 <div> 里 。 


程序 运行 的 结果 如 图 16.5 所 示 。 





















































v Ajax Clock - Chromium CS 


图 Ajax Clock \G 
4 C # © www.mousewhisperer.co.uk/ty|s/16list %7 © A 
Server: 18:34:24 








Local: 19:34:28 








图 16.5 ”Ajax 时 钟 


每 次 点 击 按钮 时 ， 就 会 生成 一 个 Ajax 请 求 并 返回 服务 器 时 间 。 图 16.5 展 示 的 结果 是 本 
地 时 间 比 服务 器 早 一 个 小 时 ， 这 是 因为 我 当时 在 西班牙 ， 而 服务 器 在 英国 。 















































16.8 小 结 




















本 章 介 绍 了 Ajax 的 基础 知识 。 这 是 一 种 不 需要 重新 加 载 页 面 
从 服务 器 获取 信息 的 方法 。 





























一 章 将 基于 这 些 知 识 建立 可 以 重用 的 Ajax 库 。 















































16.9 ”问答 

H: 在 Ajax 调用 发 出 后 ， 还 能 够 取消 吗 ? 

答 : 能 。 只 需要 使 用 XMLHttpRequest 对 象 的 abort() 方 法 : 
var myRequest = getXMLHttpRequest() ; 
myRequest.abort(); 

Al: 何 时 应 该 使 用 GET 请 求 ， 何 时 又 应 该 使 用 POST 请 求 呢 ? 


答 : GET 请 求 的 长 度 不 能 超过 255 个 字符 。 如 果 需 要 发 送 较 多 的 数 
据 ， 应 该 使 用 POST 请 求 。 

















































































































16.10 ”作业 


请 先 回答 问题 ， 再 查看 后 面 的 答案 。 























16.10.1 测验 














1. 当 readyState 属 性 值 为 什么 时 ， 














示 Ajax 调 完成 F ? 














a. 0 
b. true 
c. 4 
2. XMLHttpRequest 对 象 的 哪个 属性 以 文本 形式 保存 了 从 服务 器 返 
回 的 数据 ? 





a. responseText 
b. statusText 


c. responseXML 


























3. XMLHttpRequest 对 象 能 够 直接 连接 : 
a. 互联 网 上 任何 域 
b. 所 在 域内 部 的 地 址 


c. 仅 PHP 页 面 








16.10.2 答案 




















1， 选 c。readyState 等 于 4 时 表示 Ajax 调用 已 经 完成 了 。 
2. ita. 

















So 























接连 接 所 在 域内 部 的 地 址 。 








16.11 练习 


利用 本 章 及 前 面 章节 介绍 的 知识 ， 修 改 时钟 范 例 的 代码 ， 让 时 钟 间 
隔 一 定时 间 自 动 更 新 。《〈 提 示 : 使 用 定时 器 ， 比 如 setInterval0 或 
setTimeout(). 


修改 时 钟 范例 的 脚本 ， 显 示 服 务 器 时 间 与 本 地 时 间 之 间 的 时 差 。 
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第 17 章 ”创建 简单 的 Ajax 库 
本 章 主要 内 容 包括 : 


可 建立 一 个 简单 的 可 重用 的 Ajax 库 
程序 里 包含 库 

回 文 本 数据 
使 用 XML 

































































Bi RDS 




















本 章 将 介绍 如 何 把 上 一 章 学 习 的 技术 封装 到 一 个 JavaScript 库 
便 用 于 其 他 程序 。 






































， 以 


17.1 Ajax 库 


ae TENS 展示 了 一 些 实现 Ajax 程序 的 JavaScript 代 码 技术 ， 
































。 后 成 XMLHttpRequest 对 象 的 方法 。 它 可 以 用 于 当前 常用 的 全 部 浏 

览 器 。 
。 利用 XMLHttpRequest 建 立 和 发 送 GET 与 POST 请 求 。 
。 避免 缓存 技术 对 GET 请 求 的 影响 。 
。 回调 函数 首先 检查 Ajax 调用 是 否 正 确 完成 ， 然 后 继续 其 他 操作 。 
。 处 理 返回 到 responseText 属 性 里 的 文本 数据 。 


本 章 将 利用 这 些 j 
给 HTML 添 加 Ajax 功 外 
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ie 

















E 念 建立 一 个 JavaScript 库 ， 从 而 可 以 用 最 少 的 代码 








or 
o 


























P 这 个 Ajax 库 不 会 像 一 些 开 源 库 那 样 复杂 ， 但 也 具有 足够 的 实 
功能 。 



































17.1.1 目标 














前 一 章 介绍 了 如 何 构造 Ajax 程序 的 基本 模块 





创建 XMLHttpRequest 实 例 。 
。 监视 服务 器 响应 ， 判 断 调用 何 时 完成 。 
。 使 用 回调 函数 。 





















































那么 我 们 的 Ajax 库 应 该 包含 什么 功能 呢 ? 








。 前 一 章 的 范例 包含 了 GET 请 求 ， 显 然 支持 HTTP 的 POST 请 求 也 是 很 

必要 的 。 

。 前 面 的 范例 只 处 理 服务 器 返回 的 文本 数据 ， 而 我 们 的 库 还 应 该 能 够 
处 理 XML 数 据 。 












































17.2 ” 库 的 实现 


ù 
确定 了 库 需 要 具有 什么 功能 之 后 ， 现 在 就 开始 建立 这 个 库 。 
























































17.2.1 创建 XMLHttpRequest 实 例 


























使 用 前 一 章 介绍 的 函数 来 创建 XMLHttpRequest 对 象 : 


function getXMLHttpRequest() { 


try { 
try { 
return new ActivexXObject("Microsoft.XMLHTTP") ; 
} 
catch(e) { 
return new ActivexXObject("Msxm12.XMLHTTP") ; 
} 
} 
catch(e) { 


return new XMLHttpRequest () ; 
































这 样 创建 XMLHttpRequest 就 只 需要 调用 函数 : 
var req = getXMLHttpRequest() ; 


17.2.2 GET 和 POST 请 求 























首先 是 GET 请 求 ， 在 前 一 章 是 这 样 处 理 的 : 


function requestGET(url, query, req) { 
var myRandom = parseInt(Math.random( )*99999999) ; 
if(query == '') { 
var callUrl = url + '?rand=' + myRandom; 
} else { 
var callUrl = url + '?' + query + ‘&rand=' + myRandom; 








} 
req.open("GET", callUrl, true); 
req.send(null) ; 


这 个 函数 有 三 个 参数 : 


。 请 求 的 目标 URL。 























。 附加 到 URL 的 查询 字符 串 ， 包 含 了 服务 器 端 程 序 所 需 的 全 部 参数 ， 
以 “参数 = 值 ” 对 的 形式 进行 编码 。 
。 实现 调用 的 XMLHttpRequest 对 象 。 


这 个 函数 为 确保 查询 字符 串 的 格式 正确 做 了 一 点 处 理 。 对 于 没有 查 
帮 串 的 调用 ， 随 机 数 在 附加 到 URL 时 必须 跟 在 问号 之 后 : 


.example.com?rand=57483947 
而 当 查 询 字符 串 不 为 空 时 ， 随 机 数 必须 跟 在 “&”* 之 后 : 












































































































































在 调用 requestGET0O) 函 数 之 前 ， 传 递 给 query 参 数 的 值 必须 已 经 完成 了 必要 的 编码 。 
接 下 来 是 处 理 POST 请 求 的 函数 。 


function requestPOST(url, query, req) { 
req.open("POST", url, true); 
req.setRequestHeader('Content-Type', ‘application/x-www-form- 
wurlencoded' ); 
req.send(query) ; 











} 





POST 请 求 不 像 GET 那 样 会 受到 缓存 的 影响 ， 所 以 不 需要 给 查询 字 
添加 随机 内 容 。 


POST 请 求 个 是 把 参数 信息 附加 到 字符 串 ， 而 是 把 它 作为 一 个 参数 
传递 给 给 send() 方 法 。 同时 ， 还 LE 设置 个 HTTP 标题 FEA» 告诉 服务 器 端 程 
序 我 们 发 送 何 种 类 型 的 数据 : 


req.setRequestHeader( 'Content-Type', ‘application/x-www-form- 
™urlencoded'); 


17.2.3 回调 函数 


为 了 让 库 尽 可 能 地 具有 通用 性 ， 要 让 用 户 能 够 指定 使 用 什么 回调 函 
数 ， 也 就 是 说 在 调用 Ajax 库 例 程 时 把 回调 函 KUNZ 作为 参数 传递 给 
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reas 

































































































































































库 。 




















我 们 要 让 JavaScript 接 收 这 个 函数 名 称 ， 然 后 执行 这 个 函数 ， 并 且 把 
Ajax 调用 返回 的 数据 作为 参数 传递 给 它 。 为 此 ， 需 要 使 用 JavaScript 的 
eval() 方 法 : 


eval(callback + '(data)'); 


17.2.4 ”实现 Ajax 调用 
现在 来 看 看 前 面 介 绍 的 这 些 函 数 如 何 相互 配合 来 完成 Ajax 调用 : 





























5 





























function doAjax(url, query, callback, reqtype, getxml) { 
var myreq = getXMLHttpRequest(); 
myreg.onreadystatechange = function() { 
if(myreq.readyState == 4) { 
if(myreq.status == 200) { 
var item = myreq.responseText; 
if(getxml == 1) item = myreq.responseXML; 
eval(callback + '(item)'); 


} 
} 
} 
if (reqtype.toUpperCase() == "POST") { 
requestPOST(url, query, myreq); 
} else { 
requestGET(url, query, myreq); 
} 
} 
这 个 函数 有 五 个 参数 : 





url: 目标 URL。 
query: 经 过 编码 的 查询 字符 串 。 
callback: 回调 函数 的 名 称 。 
reqtype: POST 或 GET。 
getxml: 1 表示 获取 XML 数据 ，0 表 示 文 本 数据 。 




















程序 清单 17.1 是 完整 的 myAjaxLib.js 代 码 。 


程序 清单 17.1 myAjaxLib.js 的 源 代码 





function getXMLHttpRequest() { 


try { 
try { 
return new ActivexObject("Microsoft.XMLHTTP") ; 
} 
catch(e) { 
return new ActivexObject("Msxml2.XMLHTTP") ; 
} 
} 
catch(e) { 


return new XMLHttpRequest(); 


function doAjax(url, query, callback, reqtype, getxml) { 
var myreq = getXMLHttpRequest(); 
myreq.onreadystatechange = function() { 
if(myreq.readyState == 4) { 
if(myreq.status == 200) { 
var item = myreq.responseText; 
if(getxml == 1) item = myreg.responseXML; 
eval(callback + '(item)'); 


} 
} 
} 
if (reqtype.toUpperCase() == "POST") { 
requestPOST(url, query, myreq); 
} else { 
requestGET(url, query, myreq); 
} 


function requestGET(url, query, req) { 
var myRandom = parseInt(Math.random( )*99999999) ; 
if (query == '') { 
var callUrl = url + '?rand=' + myRandom; 


} else { 
var callUrl = url + '?' + query + ‘&rand=' + myRandom; 
} 
req.open("GET", callUrl, true); 
req.send(null) ; 


function requestPOST(url, query, req) { 

req.open("POST", url, true); 

req.setRequestHeader( 'Content-Type', ‘application/x-www-form- 
urlencoded'); 

req.send(query) ; 





17.3 ”使 用 Ajax 库 


为 了 示范 如 何 使 用 Ajax 库 ， 先 建立 一 个 简单 的 HTML 页面 ， 如 下 所 
































ZN: 


<!DOCTYPE html> 
<html> 
<head> 
<title>Ajax Test</title> 
</head> 
<body> 
<input type="button" id="btn1" value="Make call" /> 
</body> 
</html> 
这 个 简单 的 页 面 只 是 显示 一 个 按钮 ， 标 签 是 “Make Call”。 页 面 所 有 
的 功能 都 是 通过 JavaScript 利 用 我 们 的 Ajax 库 来 实现 的 。 


把 程序 “Ajax 化 ”的 步骤 是 : 
O 在 页 面 的 <head> 部 分 包含 Ajax 库 myAjaxLib.js。 
© 编写 回调 函数 来 处 理 返 回 的 信息 。 
© 给 页 面 上 的 按钮 添加 事件 处 理 器 来 调用 服务 器 请 求 。 


首先 来 示范 使 用 GET 请 求 ， 处 理由 responseText 属 性 返回 的 信息 。 














































































































































































































包含 Ajax 库 的 方式 是 很 直观 的 : 
<script src="myAjaxLib.js"></script> 


接 下 来 需要 编写 一 些 JavaScript 代 码 。 其 一 是 回调 函数 。 本 例 就 是 利 
alert() 对 话 框 显示 返回 的 信息 : 




















E 























function cbhack(text) { 
alert(text) ; 


最 后 是 给 按钮 添加 onClick 事 件 处 理 器 : 


window.onload = function(){ 
document .getElementById("btn1").onclick = function(){ 
doAjax("libtest.php", "“param=hello", "cback", "GET", 0); 











} 

















服务 器 端 脚本 libtestphp 只 是 返 
<?php 
echo "Parameter value was: ".$ GET['param']; 


a 








查询 字符 串 里 变量 param 的 值 ; 


















































调用 doAjax0O 时 使 用 的 参数 指明 回调 函数 的 名 称 是 cback， 请 求 的 类 
型 是 GET， 期 望 返回 的 数据 保存 在 responseText 里 。 


修改 后 的 HIML 页面 如 程序 清单 17.2 所 示 。 


程序 清单 17.2 调用 myAjaxLib.js 的 HTML 页 面 



















































































<!DOCTYPE html> 
<html> 
<head> 
<title>Ajax Test</title> 
<script src="myAjaxLib.js"></script> 
<script> 
function cback(text) { 
alert(text); 
} 
window.onload = function(){ 
document.getElementById("btni").onclick = function(){ 


doAjax("libtest.php", "param=hello", "cback", "GET" 
} 
} 

</script> 
</head> 
<body> 

<input type="button" id="btn1" value="Make call" /> 
</body> 
</html> 








图 17.1 展 示 了 程序 运行 的 结果 。 











| = The page at www.mous 


Parameter value was: hello 


17.1 从 GET 请 求 返回 的 文本 



































为 了 示范 使 用 相同 的 库 获 取 XML 数 据 ， 我 们 还 可 以 让 服务 器 端 





序 以 XML 文档 方式 返回 时 间 数 据 ; 


» 0); 


an 


a 





<?php 

header( ‘Content-Type: text/xml'); 

echo "<?xml version=\"1.@\" ?><clock1><timenow>" 
=». date('H:i:s')."</timenow></clock1>"; 

?> 


这 其 实 就 是 第 16 章 clock.php 的 XML 版 本 。 


相应 地 修改 回调 函数 来 返回 解析 后 的 XML， 这 时 需要 使 用 一 些 
DOM 方 法 。 



































function cback(text) { 
var servertime = 

text.getElementsByTagName("timenow" )[@].childNodes[@].nodeValue; 
alert('Server time is ' + servertime) ; 


} 


























还 有 要 修改 的 就 是 调用 doAjax() 的 方式 : 


window.onload = function(){ 
document.getElementById("btni").onclick = function(){ 
doAjax("telltimeXML.php", "", "cback", "POST", 1); 



























































这 里 使 用 了 POST 请 求 。 由 于 服务 器 端 脚本 telltimeXML.php 不 需 
查询 字符 串 ， 所 以 第 二 个 参数 是 空 的 。 最 后 一 个 多 pe 
要 从 responseXML 属 性 获取 XML 数据 o 


图 17.2 展 示 了 程序 打开 的 对 话 
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~ The page atwww.mc ~ * 


/À Server time is 12:09:50 
ey 





图 17.2 POST 请 求 返回 的 XML 格式 的 服务 器 时 间 























SER 
从 远程 站 点 返回 “keywords” 元 标签 信息 
利用 myAjaxLib.js 来 编写 一 个 程序 ， 从 用 户 输入 的 URL 获 取 “keywords” 元 标签 信息 。 


“元 标签 "是 页 面 <head> 部 分 里 一 种 HTML 容 器 元 素 。 它 包含 了 对 于 搜索 引擎 很 重要 的 数据 ， 还 包含 了 关于 
a G ea as o “keywords" 元 标签 通常 包含 一 系列 与 站 点 内 容 相 关联 的 单词 ， 单 词 之 间 以 逗号 分 
Hilo 


















































举例 来 说 ，Ajax 开 发 人 员 站 点 的 keywords 元 标签 的 内 容 可 能 是 : 


<meta name="keywords" content="programming, design, development, 
Ajax, JavaScript, XMLHttpRequest, script" /> 


于 JavaScript 对 于 安全 的 限制 ，XMLHttpRequest 对 象 不 能 向 所 在 域 之 外 的 URL 发 送 
服务 器 请 求 。 如 果 想 从 远程 站 点 获取 信息 ， 必 须 依赖 服务 器 端 脚 本 。 


本 例 中 使 用 另 一 个 简单 的 PHP 肢 本 metatags.php， 如 下 所 示 : 
























































<?php 
$tags = @get_meta_tags('http://'.$ REQUEST['url']); 
$result = $tags[ 'keywords']; 
if(strlen($result) > 0) { 
echo $result; 
} else { 
echo "No keywords metatag is available."; 


} 


?> 


























这 段 脚本 使 用 了 PHP 函 数 get_meta_tags()。 它 专门 用 于 从 HTML 页 面 解析 元 标签 信息 ， 
把 结果 保存 到 数组 里 。 这 段 脚 本 查看 是 否 存 在 “keywords” 元 标签 ， 如 果 存 在 就 返回 它 的 内 
容 。 



































范例 页 面 的 HTML 代 码 是 相当 直观 的 : 





<!DOCTYPE html> 
<html> 
<head> 
<title>Keywords Grabber</title> 
</head> 
<body> 
http://<input type="text" id="txt1" value="" /> 
<input type="button" id="btn1" value="Get Keywords" /> 
<h3>Keywords Received:</h3> 
<div id="displaydiv"></div> 
</body> 
</html> 
本 例 中 ， 元 标签 信息 会 写 入 到 页 面 元 素 <div> Cid="displaydiv") 。 回 调 函数 没有 什么 
新 鲜 内 容 : 
function display(content) { 
document .getElementById("displaydiv").innerHTML = content; 


























ig 


ph 








当 页 面 加 载 时 ， 需 要 给 按钮 附加 一 个 onClick 事 件 处 理 器 。 自 
户 输入 的 URL， 然 后 让 Ajax 调用 metatags.php 。 











按钮 后 ， 程 序 会 获得 
































window.onload = function(){ 
document .getElementById("btni").onclick = function(){ 
var url = document.getElementById("txt1").value; 
doAjax("metatags.php", "url=" + escape(url), "display", "post", 
=O); 
} 
} 


完整 的 metatags.html 代 码 如 程序 清单 17.3 所 示 。 





程序 清单 17.3 HTML 页面 metatags.html 





<!DOCTYPE html> 
<html> 
<head> 
<title>Keywords Grabber</title> 
<script src="myAjaxLib.js"></script> 
<script> 
function display(content) { 
document. getElementById("displaydiv").innerHTML = content; 
} 
window.onload = function(){ 
document. getElementById("btni").onclick = function(){ 
var url = document.getElementById("txt1").value; 
doAjax("metatags.php", "url=" + url, "display", "post", 


=O); 
} 
} 
</script> 
</head> 
<body> 


http://<input type="text" id="txt1" value="" /> 
<input type="button" id="btn1" value="Get Keywords" /> 
<h3>Keywords Received:</h3> 
<div id="displaydiv"></div> 
</body> 
</html> 


在 编辑 器 里 创建 这 个 页 面 ， 同 时 还 需要 在 支持 PHP 的 Web 服 务 器 上 部 署 metatags.php 和 
myAjaxLib.js. 


如 果 不 方 便 访问 支持 PHP 的 Web 服 务 器 ， 可 以 在 自己 的 计算 机 上 或 是 局 域 网 其 他 计算 机 上 安装 PHP 服 务 。 
互联 网 上 有 不 少 免费 的 解决 方案 ， 比 如 XAMPP， 详 情 请 见 http://www.apachefriends.org/en/xampp.html 。 


用 浏览 器 加 载 页 面 metatags.html， 就 会 看 到 图 17.3 所 示 的 页 面 。 























Panes E S 


v Keywords Grabber - Chromium 


@ Keywords Grabber X a 
C f (© www.mousewhisperer.co.uk/tyjs/metatags.htm| xl (Vv) ` 








< 
C 
Keywords Received: 











17.3 ”获取 关键 字 的 程序 


用 户 需 要 输入 某 个 URL， 然 后 单 击 “Get Keywords” 按 钮 ， 就 会 执行 doAjax0 函 数 ， 把 
输入 的 URL 作 为 参数 发 送 给 服务 器 脚本 metatags.php。 
属性 的 内 容 就 被 加 载 到 <div> 容 器 ， 从 而 得 到 类 


aR 
































当 服务 器 调用 完成 之 后 ，responseText 
似 图 17.4 的 结果 。 


























Keywords Grabber - Chromium A +X. 


/® keywords Grabber \G 
C ft © www.mousewhisperer.co.uk/tyis/metatags html X ODA 








€ 
http://|www.cnn.com 
Keywords Received: 


CNN, CNN news, CNN International, CNN International news, CNN Edition, Edition news, 
news, news online, breaking news, U.S. news, world news, global news, weather, business, 
CNN Money, sports, politics, law, technology, entertainment, education, travel, health, special 
reports, autos, developing story, news video, CNN Intl, podcasts, world blogs 









































其 他 的 URL 并 点 击 按钮 返 

















图 17.4 ”成 功 获 
在 页 面 运 行 过 程 中 可 以 发 现 这 样 的 情况 ， 我 人 


区 关键 字 





不 必 等 待 页 








E] 











REF. ZI 





E 是 使 

















Ajax 要 达到 





重新 加 载 ， 就 可 以 继续 输 




















的 效果 。 





17.4 ”小结 























本 章 利用 前 一 章 介绍 的 技术 构造 了 一 个 完整 可 如 
可 以 给 HTML 页 面 集成 Ajax 功 能 。 








toh 








用 的 JavaScript 库 ， 

















这 个 库 支 持 GET 和 POST 请 求 ， 能 够 处 理 服务 器 以 文本 或 XML 格式 
返回 的 数据 。 




















175 ”问答 

















i: 有 什么 方式 可 以 通过 responseText 属 性 返回 多 个 值 ? 


















































当然 可 以 从 responseText 属 性 返回 序列 化 的 数据 ， 然 后 在 程序 
























































答 : 
里 对 数据 进行 解码 而 得 到 多 个 值 。 关 于 数据 序列 化 ， 请 参考 第 8 章 和 第 


用 文本 格式 还 是 XML 格式 呢 ? 


答 : 对 于 复杂 的 数据 结构 来 说 ，XML 一 般 是 最 好 的 选择 。 或 者 
























































方 应 用 或 Web 服 务 ， 使 用 XML 通常 是 必要 的 。 然 而 














10 章 。 

问 : 应 该 优先 使 
说 ， 数 据 来 自 于 第 三 
才 于 比较 简单 的 应 

















4 





了 ， 同 时 还 能 














| 〈 甚 至 也 包括 一 些 比 较 复杂 的 ) ， E 











FHXML4 

















架构 或 XML 解析 延 时 可 能 带 来 的 问题 


17.6 ”作业 
请 先 回答 问题 ， 再 参考 后 面 的 答案 。 


























17.6.1 测验 
1. 回调 函数 会 : 
a. 判断 Ajax 调用 已 经 成 功 完成 
b. 在 Ajax 调用 成 功 完成 之 后 执行 
c. 在 Ajax 调用 没有 顺利 完成 时 执行 
需要 特殊 技巧 以 避免 缓存 的 影响 ? 

























































































2， 哪 种 Ajax 调用 
a。GET 请 求 
b. POST 请 求 
c 全 部 请 求 


3. 在 POST 请 求 中 ， 参 数 信息 传递 给 服务 器 脚本 的 方式 是 : 


a， 作 为 XMLHttpRequest 对 象 send0) 方 法 的 参数 



































b. 作为 查询 字符 串 附 加 到 目标 URL 之 后 




















c. 利用 回调 函数 




















176.2 答案 
1. 选 b。 当 Ajax 调用 


2. 选 a。GET 请 求 需要 考虑 缓存 的 影响 。 我 们 
添加 随机 数 的 方式 来 解决 这 个 问题 。 





成 功 完成 之 后 ， 会 执行 回调 函数 。 
的 范例 通过 给 查询 字 















































~ 
rE 
Hy. 























3， 选 a。 参 数 信息 作为 XMLHttpRequest 对 象 snd() 方 法 的 参数 传递 
给 服务 器 脚本 。 


17.7 练习 


尝试 修改 程序 清和 


和 17.3 和 17.4 

















过 程 中 ， 给 用 户 提示 











这 个 库 目 前 在 错误 检测 与 处 理 方面 





些 信 息 。 











的 代码 ， 在 等 待 Ajax 请 求 完 成 响应 的 


























改 ， 从 而 对 于 req.status 不 等 于 200 时 的 状态 做 出 


适当 

















面 还 是 很 弱 的 ， 尝 试 对 3 








的 处 理 。 


其 进行 修 


第 18 章 ”解决 Ajax 问题 


本 章 主要 内 容 包括 : 

















。 利用 浏览 器 工具 调试 Ajax 
。 常见 Ajax 错 误 
。 常用 编程 注意 事项 

















Lin 





























本 书 前 面 曾经 介绍 如 何 使 用 常见 浏览 器 的 工具 或 扩展 包 来 调试 
JavaScript 代 码 。Ajax 的 调试 更 加 复杂 一 些 ， 因 为 服务 器 调用 和 页 面 发 起 
的 请 求 是 由 XMLHttpRequest 对 象 实现 的 。 本 章 将 介绍 如 何 分 析 数 据 流 
转 来 解决 产生 的 问题 ， 还 会 介绍 在 开发 Ajax 应 用 程序 的 过 程 中 常见 的 问 
题 和 相应 的 解决 办 法 。 





























































































































































































































18.1 调试 Ajax 程序 

本 章 前 面 的 内 容 里 介绍 过 使 用 浏览 器 提供 的 工具 来 调试 JavaScript 代 
5. 

Ajax 的 调试 更 加 复杂 一 些 ， 不 仅 需要 了 解 变 量 或 表达 式 当前 的 值 ， 
还 需要 了 解 输入 与 输出 的 数据 。 另 外 ， 了 解 服务 器 调用 的 阶段 和 它们 的 
响应 也 是 很 有 帮助 的 。 

下 面 就 来 介绍 利用 一 些 常 见 工 具 了 解 Ajax 程 序 的 运行 情况 。 











18.1.1 Firebug 


像 大 多 数 浏览 器 一 样 ， 




















件 ， 下 载 地 + 





Firebug 可 以 说 是 JavaScript 开 发 和 调试 的 全 能 工具 ， 


. ME 可 





Mozilla 的 Firefox 提 供 了 一 些 开 发 工具 。 
章 曾 经 介绍 过 使 用 其 中 的 “错误 控制 台 ” 调 试 简单 的 膨 
过 “DOM 查 看 器 ”插件 。 而 现在 要 介绍 的 Firebug 是 男 一 个 值得 汶 
上 是 http:/getfirebug.comy 。 

















































































































本 ， 第 11 章 介 
































ay 











第 6 
绍 





var 


的 功能 包 


以 动态 编辑 HTML， 实 时 看 到 修改 后 的 结 





* 检查 和 编辑 CSS。 即时 修改 任何 页 面 元 素 的 样式 。 

。 测 量 和 显示 任何 页 面 元 素 的 位 移 、 边 距 、 边 界 、 填 充 和 大 小 。 

。 分 析 网 络 行为 ， 包 括 加 载 资 源 的 时 间 、 组 存 行为 和 
XMLHttpRedquest 行 为 。 

e 测试 JavaScript 的 运行 ， 从 而 发 现 和 消除 代码 执行 过 程 中 的 瓶颈 ， 提 
高 脚本 运行 速度 。 

。 查 看 、 浏 览 和 编辑 DOM 树 。 

。 保存 日 志 信息 以 便 日 后 分 析 。 

实践 
使 用 Firebug 调 试 Ajax 


在 给 Firefox 安 装 了 Firebug 之 后 ， 打 开 第 














17 章 获取 关键 字 的 范例 代码 ， 按 F12 键 激活 














Firebug， 应 该 能 看 到 如 图 18.1 所 示 的 窗 


















































18.1 
可 以 看 到 下 方 的 窗口 有 一 些 选项 卡 ， 








lẹ | Clear Persist Profile ‘All Errors Warnings Info Debug Info 


运行 中 的 Firebug 

















过 调整 Firebug 的 设置 ， 可 以 选择 显示 哪些 类 型 的 消息 。 
这 时 的 “Console” 选 项 卡 很 可 能 是 空 的 。 


Console 选 项 卡 还 提供 了 一 个 JavaScript 命 令 行 ， 我 们 可 以 在 














点 击 “Net” 选 项 卡 打开 “Network” 面 板 ， 它 可 以 监视 和 和 








信 。 














X Keywords Grabber - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 

Keywords Grabber | 中 | | ~ 
ee | vww.mousewhisperer,co,uk/tyjs/metatags.html v 
http: Get Keywords | 
Keywords Received: 
WY |< |= console ~ | HTML css Script DOM) Net Le |800 





其 中 的 “Console” 选 项 卡 集中 显示 了 各 类 消息 。 通 


其 中 执行 任何 的 JavaScript 命 令 。 


显示 Web 页 面 进行 的 任何 HTTP 通 




















全 部 HTTP 请 求 都 会 显示 在 这 里 ， 











程 。 目 前 这 里 显示 的 是 两 个 文件 的 加 载 记录 : HTML 文 件 metatags.html 科 
的 右 侧 有 一 个 小 图 示 ， 显 示 了 每 

















行 代表 着 从 页 





Ajax 库 myAjaxLib.js。 从 图 18.2 可 以 看 出 ， 在 每 一 行 记录 





个 HTTP 请 求 的 处 理 时 间 。 








到 服务 器 再 返 




















可 的 一 个 完整 过 
JavaScript 编 写 的 























4 | Clear Persist {all HTML CSS JS XHR Images Flash Media 


| 田 GET metatags.html 304 Not Modiied mousewhisperer couk 6336 BN 1587: 
| 国 GET myAjaxLib.js 304NotModifed 。 mousewhisperer couk 1.1 KB 








图 18.2 Firebug 显 示 HTTP 通 信 


现在 来 看 看 运行 我 们 的 应 用 程序 之 后 ， 这 些 选 项 卡 的 内 容 会 有 什么 变化 。 在 页 面 的 表 
单字 段 里 输入 URL， 然 后 点 击 “Get Keywords” 按 钮 ， 从 远程 站 点 获取 一 些 元 标签 信息 。 这 
个 HTTP 请 求 应 该 出 现在 “Network” 面 板 的 列表 里 ， 点 击 最 左 侧 的 加 号 标签 可 以 展开 列表 
项 ， 获 得 关于 Ajax 请 求 的 更 详细 信息 ， 包 括 发 送 和 返回 的 数据 、 返 回 的 HTTP 状 态 、 数 据 
往返 的 时 间 ， 如 图 18.3 所 示 。 
























































































































| ~ Keywords Grabber - Mozilla Firefox PRE 











File Edit View History Bookmarks Tools Help 
E} Keywords Grabber | Sa 
€ |} GB E wwwmousewhisperer.co.ukityjs/metatags htrnl 加 
httpWfwwwwyzzjinfo o Get Keywords | 


Keywords Received: 


WYSIWYG, JavaScript, editor, HTML editor, textarea, cms, content management, WYSIWYG editor, xhtml, bold, italic, 
underline, layout, page layout, web page design 





ll 


iCal ~ Console HTML CSS Script DOM 
43 | Clear Persist | ‘all HTML CSS JS XHR Images Flash Media 
















GET metatags.html 304 Not Modified mousewhisperer.co.uk 633B | (i) 131ms 

困 GET myAjaxLibjs 304 Not Modified mousewhisperer.co.uk 1.1 KB ME 123s 

© POST metatags.phy 200 Ok Mmousewhisperer.co.uk 161 BiG 251s 
Headers Post Response HTML 


WYSIWYG, JavaScript, editor, HTML editor, textarea, cms, content management, WYSIWYG editor, xhtml, bold 
, italic, underline, layout, page layout, web page design 




















图 18.3 ”关于 Ajax 调用 的 信息 


有 些 信息 不 是 从 服务 器 获得 的 ， 而 是 来 自 于 浏览 器 缓存 ， 这 可 以 从 状态 “304 Not 
Modified” 分 辨 出 来 ， 如 图 18.3 所 示 。 


而 状态 “200 OK” 说 明了 Ajax 调用 返回 的 信息 来 自 于 服务 器 ， 这 正 是 我 们 所 需要 的 。 


用 鼠标 右键 单 击 列表 中 的 任意 一 项 都 会 激活 上 下 文 菜单 ， 就 可 以 把 数据 拷贝 到 剪贴 
板 ， 或 是 在 新 选项 卡 里 打开 请 求 等 。 








































































































有 时 还 可 以 在 Network 选 项 卡 














Wa) XHR 工 具 ， 从 而 让 Firebug 在 每 次 XMLHttpRequest 调 用 时 暂停 页 面 ， 便 于 我 们 查 
看 发 送 与 接收 的 数据 。 在 调试 包含 了 大 量 调 


的 。 























的 复杂 Ajax 程 序 


具 栏 的 左 侧 看 到 表示 和 暂停 的 按钮 。 


它 可 以 暂停 (或 取 

















Firebug 的 功能 远 不 止 如 此 ， 如 果 想 深入 了 解 Ajax 〈 或 是 作为 JavaS 

















而 且 选 择 使 用 Firefox 作 为 浏览 器 的 人 员 ， 





# http://getfirebug.com/wiki/index.php/Main_Page 。 


Firebug 是 值得 深入 了 





时 ， 这 个 功能 是 非常 有 


























cript 开 发 人 员 ) ， 





解 的 。 详 细 信息 请 查 





18.1.2 IE 


微软 公司 在 下 9 里 提供 了 一 组 开发 者 了 


























他 类 似 浏 览 器 相 息 美 。 





























工具 后 metatags.html 页 面 运 





在 IE 9 里 同样 是 按 F12 键 激活 “开发 者 了] 

















云 行 的 情况 。 


其 功能 可 与 Firefox 或 其 








.4 展示 了 打开 这 个 





鲁 htp//wwm.. PD BS X È S Keywords Grabber x s 
i File Edit View Favorites Tools Help 








http:// www.wyzz.info į Get rds, 





Keywords Received: 





WYSIWYG, JavaScript, editor, HTML editor, textarea, cms, content management, WYSIWYG editor, xhtml, bold, italic, 
underline, layout, page layout, web page design 




































































File Find Disable View Images Cache Tools Validate | Browser Mode: IE9 Document Mode: IE9 standards 一 x 
HTML CSS Console Script Profiler | Network | Search Captured Traffic. 万 
Ce R bed [Start capturing. Goto detailed view Clear 
URL Method Result Type Received Taken Initiator | Timings = 
/tyis/metatags.php POST 200 text/html 305B 343 ms 

al 下 tal 
Items: 1 Sent: 423 B Received: 305 B 

















18.4 TE 9 开发 者 工具 里 的 Network 选 项 卡 









































为 了 在 下 里 记录 Ajax 调用 和 其 他 网 络 活动 ， 需 要 点 击 “Start 
Capturing” 按 钮 〈 见 图 18.4) 来 启动 或 停止 记录 。 这 是 因为 监视 网 络 活动 
本 身 会 对 性 能 有 些 影响 ， 也 需要 使 用 一 些 内 存 。 


在 事件 记录 之 后 ， 在 概览 视图 里 双击 某 个 记录 就 会 以 选项 卡 形式 打 
开 详 细 视 图 ， 从 中 可 以 查看 请 求 和 响应 标题 、 请 求 和 响应 主体 、cookie 
和 时 间 信 息 。 图 18.5 展 示 了 这 个 视图 ， 从 中 可 以 看 到 Ajax 的 时 间 信 息 。 
















































































































































































File Find Disable View Images Cache Tools Validate | Browser Mode: IE9 Document Mode: IE9 standards SE 











HTML CSS Console Script Profiler | Network | Search Captured Traffic.. 2 




















A R led ([startcapturing.) [CBadktosummamyview ) [i<Prev] 1/1 Next > Clear 




















URL: http://www.mousewhisperer.co.uk/tyjs/metatags.php 
Request headers | Request body | Response headers | Response body, | Cookies | Initiator | Timings 























Name Offset Duration Key Oms 152s 


Wait Oms 118s m 
Start +118s 93ms 一 一 
Start 十 127s <1ms 一 -一 | 
Request +1275 250 ms [m| 
Response +1525 <ims [ 
Gap +1525 <ims 一 





| | 


118s 


Wait: A 
‘The time since the start of the page navigation to when this request started, 











18.5 IE 9 里 的 HTTP 时 间 信 息 
点 击 表格 中 的 项 目 可 以 查看 更 详细 的 信息 。 


TE 9 还 可 以 把 捕获 的 寻 ,保存 到 文件 ， 格 式 可 以 是 CSV《〈 喜 号 
分 隔 值 ) 或 XML， 这 样 便于 与 其 他 开发 人 员 分 享 信息 。 
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18.2 ”常见 Ajax 错 误 














除了 
不 小 心 就 
解决 方案 
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已 提 到 








简单 编码 错误 导 
会 导致 错误 


1 的 问 是 


致 的 
将 会 





。 本 节 





题 并 不 是 全 部 











已 介 应 该 提供 


一 些 很 好 的 








“返回 
所 有 的 涡 


18.2.1 











览 器 在 导航 栏 者 
存 最 近 访 问 过 的 页 面 的 列表 ， 
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按钮 
BP 有 一 











问题 外 ，Ajax 还 有 














些 天 生 的 陷阱 ， 











介绍 其 中 的 一 些 


问题 ， 并 


























的 ， 给 


思路 。 





AGE A 




















it) 














F 
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回 ” 





IP BAA 


TIN 


出 的 解决 方案 也 不 是 








讨论 可 外 


住 一 的 ， 但 








”按钮 。 浏 览 器 会 在 内 存 里 保 




















] 户 能 够 重新 访问 最 近 浏 览 过 的 页 面 。 














ATINI va sk, 














其 中 就 包括 使 














然而 从 前 





面 的 介 























绍 可 以 看 出 ， 





EE 


Ajax 恰恰 是 要 
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页 面 传递 信 | 
多 改 页 面 内 容 。 

















的 方 








MA, B 


Hl”? 





按钮 会 怎么 样 











zt, HY PAE AS E SE VS HT OT h 
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这 个 问题 最 近 引 发 ] 











。 以 编程 
建 前 











手段 记录 页 面 状 态 
一 个 状态 














。 劝说 


户 不 对 











从 技术 来 i 
Ajax 代 码 相 当 


二 种 方 











式 虽 然 在 某 种 
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发 人 员 


过 间 的 讨论 ， 
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Hl? 





Ww 




















JP ahi 











”按钮 。 


观点 主要 分 为 两 
按钮 时 ， 根 据 记 录 重 
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改变 这 种 在 独立 的 多 个 
的 情况 下 不 断 


Ik: 








成 前 一 个 
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些 非 常 
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是 可 行 的 ， 但 


勇敢 ”的 程序 员 会 这 么 做 。 
上 显得 是 在 逃避 问题 ， 但 它 的 确 有 一 些 
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使 用 Aj 








优 























、 也 不 需要 “ 返 返 
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H HTE FERR Ho 四 与 
为 这 种 程序 根本 就 没 
































日 会 让 


面 程序 一 般 是 没 
及 有 “页 面 ” 的 概念 。 


18.2.2 ”书签 和 链接 


这 个 问题 与 前 面 的 < 返 
给 页 面 设置 书签 就 是 给 特定 内 容 建立 了 快捷 方式 。 从 基 了 





回 ?按钮 问题 不 无 关系 。 

















度 来 说 ， 这 种 方式 不 无 道理 。 虽 然 页 
3 面 ， 就 会 让 我 们 十 分 








要 能 够 找到 页 























HME 








G 























wh 





























户 的 操作 从 服务 器 返 











接近 





而 对 于 Ajax 来 说 ， 它 可 以 在 整个 程序 里 仅 使 用 
回 



































量 动态 内 容 。 








By 





这 时 























果 。 


如 果 设置 某 个 特定 显示 内 容 
会 得 到 什么 结果 呢 ? 仅 利用 这 个 页 


的 书签 ， 然 
的 U 





内 容 





























后 传递 给 
RL 很 可 能 不 会 得 到 区 


个 页 






































能 彻底 解决 上 述 问 题 ， 
18.2.3 
这 是 Ajax 改 变 了 独 
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Tio 


给 用 户 的 反馈 





我 们 可 以 给 程序 一 些 特 
日 总 




















的 内 容 提 供 





让 Pt 








了 所 帮助 。 











立 页 面 
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的 界面 风格 


























BAARN KE Web I H 














的 用 





户 会 习惯 了 











固定 的 链接 ， 这 样 





Zsa, FEA 
每 次 操作 者 





的 
会 包含 一 些 动态 内 容 ， 但 只 
经 访问 过 的 内 容 。 














朋友 或 同事 ， 
有望 的 结 


BIKA 


E 的 另外 一 个 问题 。 





CETATE 

















为 此 ， 很 多 Ajax 程 
动画 代 丛 静止 图 




















比如 














18.2.4 











书 介 绍 的 








序 提供 了 


像 ， 修 改 鼠 标 
让 Ajax 平稳 退化 
发 技术 都 旬 












































用 


tA 


SAN SC RPK EAR AD 
户 也 可 能 关闭 沪 

















些 视觉 提示 来 表示 正在 进行 的 操作 
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RHR RERAN 


对 当今 流行 的 浏览 器 ， 但 
览 器 来 访问 我 们 的 页 面 


本 的 JavaScript 或 Ajax 功能 。 











信息 。 





























我 们 不 希 





自己 的 Ajax 程序 如 














ty 


D, EREN 











明显 错误 时 





， 比 如 XMLHttpRequest 实 
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E 这 种 情况 下 完全 崩 演 


HIH o 








创建 失败 








我 们 不 能 保证 ; 
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时 ， 


为 非 Ajax 模式 ， 
18.2.5 ”应 对 搜索 引擎 嗅 探 


段 之 


















































Po ee a e a 动 转换 








至 少 应 该 让 用 户 能 够 转 到 不 使 用 Ajax 的 页 面 

























































































搜索 引擎 使 用 多 种 手段 收集 站 点 的 信息 ， 自 动 程序 spider 是 重要 手 














spider 会 读 取 Web 





页 面 、 追 踪 链 接 ， 给 内 容 及 与 站 点 相关 的 其 他 信 





























息 建 3 























WATE. IX EB Tona 目录 ”。 它 能 够 根据 用 户 输入 的 








关键 


字 和 短语 返 下 相关 的 页 面 链 











动态 化 程度 很 高 























的 网 站 是 基于 用 户 交互 〈 而 不 是 被 动 的 浏览 》 从 服 














务 器 加 载 所 需要 的 数据 的 ， Shoes 就 可 能 访问 不 到 以 动态 方式 


加 载 


述 问 


18.2 


可 以 











的 内 容 ， 也 就 不 外 











建立 相应 的 目录 索引 。 
































Ajax 的 本 性 就 是 上 





较 少 的 页 面 加 载 很 多 的 动态 内 容 ， 这 明显 会 使 上 




















人 明智 的 做 法 应 该 是 让 spider 程 序 能 够 获取 站 点 内 容 的 静态 


.6 ”突出 活跃 页 面 元 素 







































































H ln 























如 果 不 对 页 面 进 行 
点 击 的 或 是 可 以 进行 交互 的 。 


在 整个 程序 oe 致 的 样式 展现 那些 可 以 产生 服务 器 请 求 或 
动态 行为 的 页 面 元 素 。 最 常见 的 例子 就 是 采用 特 
, bese 通 文本 区 分 开 ， 让 用 户 很 明确 它 能 够 产生 特定 效果 。 











精心 设计 ， 用 户 也 许 不 能 迅速 地 发 现 哪些 元 素 是 

















j 殊 样式 表示 链接 的 
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JN 需要 较 少 的 代码 ， 就 可 以 巴 关于 页 面 活动 元 素 的 指令 和 信 息 















































lim Nit: 
pam amy 


Me SS 

















单 出 菜单 里 ， 这 对 J 











图 18.6 展 示 了 这 检 








可 能 让 程序 状态 发 生 明显 改变 的 链接 是 特 另 
的 一 个 弹出 信息 框 。 
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POST: 


Applicant : Interview $) Ml <- Field list 


2IV 





After 


2nd interview 





ALL 
Yes 3) Lead Days: |1 Yanpi ama Th) 
Phone $) Event Statul appMobileTel} 


5) 
¥ 


‘AppWorkTel} 





Chase follow-up letter re 2nd inte ‘AppLatestSalary} 


‘Apphometmail} 
{AppRequiredSalary} 


Employer: 
{EmpFullName} 
EmpAddress1 
EmpAddress2 





Dear 


Pleas 


{Sig} 





18.2.7 ”避免 在 


Hopefully your second interview 


With best regards 


{AppSalutation} {EmpAddress3} 
人 
EmpPostCode 


e contact me as soon as is d| fern pURL2 


Contact: 
{ContactFullName} 
{ContactTel} 
Interview: 


{IntD ate} 
{IntTime} 
































mF 





18.6 弹出 信息 有 助 于 用 户 理解 界面 


不 适宜 的 场合 使 用 Ajax 





























虽然 Ajax 能 够 增强 Web 界 面 ， 但 我 们 也 不 得 不 承认 在 一 些 场合 ， 

















Ajax 不 仅 不 会 改 记 





用 户 体验 ， 还 可 能 产生 不 好 的 影响 。 


























特别 是 在 基 














F 页 面 的 界面 风格 特别 适合 站 点 样式 与 内 容 时 ， 就 不 必 




















一 定 使 用 Ajax。 比 如 以 文本 为 主要 内 容 ， 而 且 按 照 传统 章节 方式 分 隔 成 























不 同 页 面 的 站 点 ， 





利用 精心 设计 的 链接 就 可 以 实现 Ajax 的 功能 。 














小 型 站 点 更 























是 
杂 性 之 间 进 行 取 





18.2.8 ”安全 


经 常 需要 权衡 ， 在 发 挥 Ajax 界 面 的 功能 与 额外 代码 及 











在 设计 Web 程 序 方面 ， 





























像 JavaScript 这 样 


























息 不 能 在 其 中 出 现 。 


























来 完成 的 ， 而 且 数据 在 发 送 给 任何 重要 过 程 之 前 都 应 该 在 服务 器 端 


检验 。 




















Ajax 本 身 并 没有 带 来 什 
显 的 是 ， 使 用 Ajax 的 程序 会 包含 更 多 的 客户 端 代码 。 


么 安全 问题 ，1 





us 

















的 客户 端 代码 能 够 被 用 户 轻 

















这 里 所 说 的 敏感 信息 不 仅 指 





包括 基本 的 遍 业 逻 和 辑 。 























这 种 任务 应 该 是 由 服务 器 端 
































18.2.9 多 浏览 器 平台 测试 
























































日 很 明 


地 看 到 ， 所 以 敏感 信 
] 户 名 和 密码 之 类 ， 还 
地 本 通过 数据 库 连 接 

















进行 




































































































































































本 书 很 多 内 容 都 明确 反映 出 不 同 浏览 器 在 支持 JavaScript 方 面 的 差 
别 ， 比 如 微软 早期 浏览 器 与 符合 W3C 标 准 的 浏览 器 之 间 创 建 
XMLHttpRequest 对 象 的 差别 。 除 了 这 个 主要 的 差别 外 ， 还 有 其 他 一 些 
细微 的 不 同 

特别 是 DOM， 不 仅 在 不 同 浏览 器 之 间 有 差别 ， 甚 至 在 同一 浏览 
的 不 同 版 本 之 间 也 有 差别 。CSS 的 实现 也 是 这 样 。 

应 用 程序 应 该 在 不 同 的 浏览 器 上 进行 测试 ， 在 使 用 了 Ajax 时 尤为 重 
T 
女 

虽然 浏览 器 te 的 标准 ， 但 目前 我 们 还 是 需要 在 
尽 可 能 多 的 浏览 器 上 进行 测试 。 








18.3 ”常见 编程 注意 


有 些 编程 注意 事项 已 经 在 前 面 章节 有 所 介绍 了 ， 这 里 











事项 




















TH 


中 说 





x 
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ard 





明 。 这 些 都 是 Ajax 开发 过 程 





最 经 常 遇 到 的 问题 。 


18.3.1 GET 请 求 与 浏览 器 缓存 











对 同一 个 URL 发 出 重复 的 GET 请 求 时 ， 获 得 的 响应 可 能 不 是 来 自 于 
服务 器 ， 而 是 来 自 于 浏览 器 缓存 。 这 个 问题 在 某 些 版 本 的 IE 上 表现 最 为 





明显 。 























虽然 从 理论 上 讲 ， 使 用 适 














当 的 HTTP 标 头 可 以 解决 这 个 问题 ， 但 实 


际 上 有 时 这 个 问题 是 很 顽固 的 。 














需 的 内 容 。 








=; 














解决 这 个 问题 的 一 个 有 效 手段 是 在 目标 URL 的 查询 字符 串 里 添加 随 
机 内 容 ， 浏 览 器 就 会 把 它 看 作 一 个 新 请 求 ， 从 服务 器 而 不 是 缓存 返回 所 


















































面 范 例 通 过 r 央 这 个 问题 ， 很 多 程序 员 喜 欢 使 用 











的 另 - 种 方式 是 从 时 间 导 出 


var url = "serverscript.p 


18.3.2 “拒绝 访问 ”错误 








个 值 ， 显 然 这 个 值 每 次 都 是 不 同 的 : 


hp" + "?rand=" + new Date().getTime(); 








收 到 “拒绝 访问 ”错误 通常 意味 着 使 用 XMLHttpRequest 对 象 进行 了 跨 

















域 的 请 求 。 基 于 安全 的 考虑 ， 
程序 。 























脚本 只 能 调用 与 自己 同 在 一 个 域 的 服务 器 















































| 与 www.example.com 不 在 同一 个 域 ， 


18.3.3” 转 义 序列 




















在 书写 域名 时 注意 使 完全 相同 的 方式 ， 比如 example.com 可 能 会 被 认为 


从 而 产生 拒绝 访问 的 错误 。 








TEH 构造 GET 或 POST 请 求 的 查询 字 字符 串 时 ， 如 果 变 量 包 含 空格 或 其 


他 非 文 本 J 符 2 AYU TTY 进 但 行 转 义 : 


http.open("GET", url + escape(idValue) + "?rand=" + myRandom, true); 


18.4 小结 


毫 无 疑问 ，Ajax 能 够 极 大 地 改善 Web 界 面 ， 然 而 这 种 从 基于 页 面 到 
高 度 动态 应 用 的 转变 会 给 开发 人 员 带 来 一 些 陷阱 ， 本 章 就 说 明了 最 常见 
的 一 些 问 题 ， 并 且 给 出 了 解决 方案 。 


































































































18.5 je 














i]: Firebug 是 否 只 能 月 








H + Mozilla Firefox? 

答 : 是 的 。 但 是 有 一 个 名 为 Firebug Lite 的 版 本 能 够 用 于 多 种 浏览 
A, FSIE, Opera, Safari 和 Chrome。 虽 然 它 并 没有 包括 Firebug 的 全 部 
功能 ， 但 仍然 是 个 很 棒 的 工具 。 详 情 请 见 http://getfirebug.com/firebuglite 







































































问 : 还 有 什么 手段 能 够 确保 搜索 引擎 的 嗅 
站 点 信息 ? 





条 程序 能 够 正确 地 获取 














答 : 如 果 关 点 设计 良好 ， 而 且 使 用 了 渐进 增强 的 策略 ， 大 多 数 咱 
探 程序 都 能 够 发 现 站 点 的 全 部 内 容 。 如 果 想 进一步 确保 这 种 效果 ， 可 以 
aar see E 够 访问 的 站 点 地 图 ， 简 


妈 ， 利 用 简单 的 HTML 链 接 指向 站 点 
的 全 部 内 容 
















































































18.6 ”作业 


请 先 回答 问题 ， 再 参考 后 面 的 答案 。 





























18.6.1 测验 


1. Firebug 是 : 





a. Firefox 浏 览 器 的 一 个 扩展 
b. 一 个 Ajax 库 
c. 一 个 独立 的 调试 程序 

2. F12 开 发 者 工具 包含 在 : 
a. 全 部 现代 浏览 器 
b. 全 部 版 本 的 下 
c. IE9 及 以 后 版 本 

3.“ 拒 绝 访问 ”的 错误 原因 通常 是 : 
a. 尝试 访问 位 于 其 他 域 的 服务 器 
b. 使 用 POST 请 求 代替 GET 请 求 
c， 数 据 没有 正确 转 义 

18.6.2 ”答案 























































































































1. 选 a。Firebug 是 Firefox 浏 览 器 的 一 个 扩展 。 























2. 选 c。F12 开 发 者 工具 包含 于 IE 9 及 以 后 版 本 。 
3. tea. “拒绝 访问 ”的 错误 通常 是 因为 访问 其 他 域 的 服务 器 脚本 。 


























18.7 练习 


使 用 Firebug 或 下 的 F12 开 发 者 工具 监视 大 量 使 用 Ajax 的 站 点 的 网 络 
通信 ， 比 如 Facebook、Gmail 或 Twitter。 






























































Sa 

































































在 metatags.html 里 ， 查 看 从 远程 站 点 返回 关键 字 信息 通常 需 长 
时 间 。 在 设计 Ajax 程序 里 ， 我 们 为 什么 需要 考虑 像 响 应 时 间 这 类 的 信 
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sy 







































































分 ”使 用 JavaScript 库 

















利用 库 简 化 工作 

















jQuery 入 门 























jQuery UI《〈 用 户 界 面 ) 库 








第 19 章 ”利用 库 简 化 工作 
本 章 主要 内 容 和 包括; 


为 什么 要 使 用 库 
库 能 帮助 我 们 做 什么 
来 自用 户 社区 的 库 扩展 
常用 库 简 介 
prototype.js 简 介 














































































































库 就 是 可 重用 JavaScript 代 码 的 集合 ， 让 我 们 在 程序 只 需 添 加 几 行 代 
码 就 能 完成 复杂 的 操作 。 





























第 17 章 就 曾经 建立 一 个 简单 的 库 ， 而 实际 中 有 很 多 免费 的 JavaScript 
库 能 够 帮助 我 们 迅速 地 开发 功能 强大 的 跨 浏览 器 的 应 用 程序 。 本 章 会 介 
绍 其 中 一 些 最 流行 的 库 。 












































19.1 为 什么 要 使 用 库 
一 些 JavaScript 开 发 人 员 强 烈 建议 编写 自己 的 代码 而 不 是 使 用 库 ， 主 


理由 包括 ; 



















































































。 使 用 库 时 只 是 调用 其 他 人 编写 的 算法 和 函数 ， 所 以 我 们 不 能 确切 了 
解 库 里 的 代码 是 如 何 运行 的 。 
。 JavaScript 库 里 包含 很 多 不 会 用 到 的 代码 ， 但 用 户 仍然 需要 下 载 它 






































































































































与 软件 开发 工作 的 其 他 很 多 方面 一 样 ， 这 只 是 与 个 人 喜好 有 关 。 就 
本 人 而 言 ， 我 相信 “有 了 时 ”使 用 库 是 非常 有 好 处 的 : 
















































































编写 别人 已 经 写 过 的 代码 呢 ? 常用 a 
会 用 到 的 函数 。 这 些 库 得 到 了 数 以 生计 的 下 载 和 评论 ， 证 
含 的 代码 经 过 了 更 完整 的 测试 和 调试 ， 比 我 们 自己 编 SiN 
元 


善 一 些 
ey o 


他 程序 员 的 思路 。 的 确 有 些 优秀 的 程序 员 乐 于 分 享 自 己 的 代 








































































































码 ， 我 们 可 以 利用 他 们 的 成 果 ， 改 善 自己 的 程序 。 
。 利用 细致 编写 的 库 de th 的 问题 。 
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J4 

我 们 自己 可 能 不 便 安 装 多 种 浏览 且 编 写 库 的 程序 员 和 他 们 的 用 
测试 各 种 常见 的 浏览 器 。 

。 大 多 数 库 的 文件 尺寸 并 不 是 很 大 ， 下 载 造成 的 影响 不 会 很 明显 。 对 














































































































于 一 些 需 要 缩短 下 载 时 间 的 场合 ， 大 多 数 库 都 提供 了 压缩 版 本 ， 互 
pe 我 们 还 可 以 查看 库 的 代码 ， 只 保留 需要 使 
的 部 分 。 














19.2 库 能 做 什么 


库 的 功能 多 种 多 样 ， 取 决 于 它 应 用 的 领域 、 创 建 者 的 目的 及 需求 。 
但 有 一 些 功 能 是 大 多 数 库 都 包括 的 。 


| 装 DOM 方 法 。 JavaScript} 库 可 以 提供 方便 的 方式 来 选择 和 管理 页 
元 素 或 元 素 组 。 后 下 看 要 介绍 的 prototype.js 就 是 如 此 。 
。 第 15 章 曾经 介绍 过 用 定时 器 生成 页 面 元 素 的 动画 ， 而 很 多 流 
ent | 
R IL 
有 
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Es 


E 用 各 种 函数 来 完成 这 ? 操作 ， 我 们 只 需要 很 少 的 代码 就 

蝎 地 实现 滑动 、 淡 出 、 晃 动 、 变 形 、 折 钱 、 跳 动 等 效果 ， 而 

多 浏览 器 都 能 正常 运行 的 。 

正 跨 浏览 器 实现 拖 放 操作 是 相当 复杂 的 ， 使 用 库 可 以 大 大 

这 个 工作 。 

e Ajax. 不 必 考虑 XMLHttpRequest 实 例 化 问题 ， 不 必 关 心 回 调 函 数 和 
状态 代码 ， 就 能 动态 更 新 页 面 内 容 。 






























































































































































19.3 常见 的 库 


新 的 库 是 不 断 出 现 的 ， 有 些 则 经 过 连续 多 年 的 开发 和 完善 。 下 面 介 
绍 的 列表 不 完全 ， 只 是 包含 了 一 些 最 流行 的 库 。 
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19.3.1 Prototype 框架 


Prototype 框 架 Chttp://www.prototypejs.org ) 已 经 存在 了 一 些 年 头 
了 ， 当 前 版 本 是 1.7。 它 的 优势 在 于 DOM 扩 展 和 Ajax 处 理 ， 在 JSON 支 持 
与 创建 和 继承 类 方面 也 做 的 不 错 。 


Prototype 框 架 作 为 单独 的 库 进行 发 布 ， 但 也 会 作为 更 大 项 目的 组 
件 ， 比 如 Ruby on Rails 和 script.aculo.us 库 。 



























































本 章 后 面 会 进一步 介绍 Prototype 框 架 ， 包 括 一 些 实践 练习 内 容 。 


19.3.2 Dojo 























Dojo (http://www.dojotoolkit.org/ ) 是 个 开源 工具 集 ， 能 够 简化 创 
建 程序 和 用 户 界 面 的 工作 ， 功 能 包括 扩展 的 字符 串 和 数学 函数 ， 还 有 动 
画 和 Ajax。 最 新 版 本 不 仅 支 持 全 部 主流 浏览 器 ， 还 支持 手机 环境 (Dojo 
Mobile) ， 包 括 苹果 公司 的 i9OS、 安 卓 和 黑莓 。 


目前 ，Dojo 的 版 本 是 1.7。 




































































19.3.3 Yahoo! UI 





Yahoo! UI 库 (http://developer.yahoo.com/yui/ ) 是 由 Yahoo! 开 发 的 
开源 程序 ， 功 能 包括 动画 、DOM、 事 件 管理 及 一 些 方便 的 用 户 界 面 元 
素 ， 比 如 日 历 和 滑 块 。 









































19.3.4 MooTools 


MooTools Chttp://mootools.net/ ) 是 个 小 型 模块 化 JavaScript 框 架 ， 
提供 易于 理解 的 、 文 档 清晰 的 API《〈 应 用 程序 接口 ) ， 能 够 帮助 我 们 创 

















建功 能 强大 的 、 灵 活 的 跨 浏 览 器 程序 。 





19.3.5 jQuery 


jQuery Chttp://jquery.com ) 是 个 小 型 高 效 的 JavaScript 库 ， 简 化 了 多 
种 开发 工作 ， 比 如 HTML 文 档 转换 、 事 件 处 理 、 动 画 和 Ajax 调用 ， 适 合 
快速 开发 交互 站 点 。 

后 面 的 两 章 会 陆续 介绍 jQuery 库 和 与 其 相关 的 用 户 界面 库 jQueryUI。 












































19.4 prototype.js/} 24 


San Stephenson 的 prototype.js 是 个 很 流行 的 JavaScript 库 ， 包 含 了 很 
多 用 于 开发 跨 浏 览 器 JavaScript 应 用 的 函数 ， 其 中 还 有 针对 Ajax 的 支持 。 
稍 后 就 会 展示 利用 这 个 库 对 于 DOM 操 作 、HTML 表 单 和 
XMLHttpRequest 对 象 的 强大 支持 ， 我 们 如 何 简化 JavaScript 代 码 。 


从 http://prototype.conion.net/ 上 可 以 下 载 最 新 版 本 的 prototype.js。 

























































































i 本 书 编写 时 ，prototype.js 的 版 本 是 1.7.0。 如 果 下 载 了 不 同 的 版 本 ， 请 查看 文档 来 了 解 其 中 


























在 Web 程 序 中 包含 这 个 库 是 很 简单 的 ， 只 要 在 HTML 文档 的 <head> 
部 分 添加 如 下 代码 即 可 : 


<script src="prototype.js"></script> 


prototype.js 包 含 很 多 实用 的 函数 ， 能 够 帮助 我 们 更 快 地 编写 代码 ， 
形成 的 代码 更 简洁 、 更 易于 维护 。 

这 个 库 包 含 一 些 能 够 方便 实现 常见 编程 任务 的 函数 、 对 HTML 表单 
的 整体 处 理 、 对 XMLHttpRequest 对 象 的 封装 、 简 化 DOM 操 作 的 方法 与 
对 象 。 


下 面 就 来 介绍 其 中 一 些 工 










































































19.4.1 $0 函数 


$0 基本 就 是 getElementById0 方 法 的 快 足 方式 。 通 常情 况 下 ， 为 了 
返回 特定 元 素 的 值 ， 前 使 类 似 P é 的 表达 式 : 


var mydata = document.getElementById('someElementID'); 
$0 函 数 以 元 素 ID 作为 参数 ， 把 上 述 表达 式 简化 为 ; 
var mydata = $('someElementID' ); 
















































































更 进一步 ，$0 可 以 接收 多 个 元 素 ID 作 为 参数 ， 返 回 相 应 元 素 值 组 
成 的 数组 。 比 如 下 面 这 条 语句 : 


mydataArray = $('id1','id2','id3'); 
这 样 一 来 : 


mydataArray[0] 包 含 元 素 ID 为 id1 的 值 ，mydataArray[1] 包 含 元 素 ID 
为 id2 的 值 ，mydataArray[2] 包 含 元 素 ID 为 id3 的 值 。 














19.4.2 $F0 函 数 


$F0O 函 数 以 表单 的 输入 元 素 或 它 的 ID 作为 参数 ， 返 回 它 包含 的 值 。 
比如 下 面 的 HTML 脚 本 : 
<input type="text" id="input1" name="input1 "> 
<select id="input2" name="input2"> 

<option value="0">Option A</option> 

<option value="1">Option B</option> 

<option value="2">Option C</option> 
</select> 

然后 使 用 $FCinput1) 就 可 以 返回 文本 框 的 值 ， 使 用 $FCinput27) 就 可 

以 返回 选择 框 里 当前 选中 的 值 。 我 们 可 以 用 同样 的 方式 对 文本 输入 框 和 


选择 框 使 用 $FO 函 数 ， 不 必 考 虑 输入 元 素 的 类 型 ， 从 而 能 够 非常 方便 地 
返回 相应 的 值 。 


19.4.3 Form 对 象 


prototype.js 定 义 了 一 个 Form 对 象 ， 它 包含 的 一 些 方法 能 够 简化 
HTML 表 单 操作 。 


比如 ， 调 用 getElements() 方 法 可 以 返回 一 个 数组 ， 其 中 包含 表单 的 
输入 字段 : 






























































































































































| inputs=Form. getElements(' thisform' ) ; | 




















serialize() 方 法 可 以 把 输入 名 称 和 值 转换 为 URL 兼 容 的 序列 ， 
inputlist = Form.serialize(‘'thisform' ) 
在 前 面 这 行 代码 里 ， 变 量 inputlist 会 包含 序列 化 的 “参数 / 值 ? 对 : 
field1=value1&field2=value2&field3=value3... 
Form.disable('thisform') 和 Form.enable('thisform") 从 名 称 就 可 以 看 出 它 
们 的 功能 。 
19.4.4 Try.these() ri 2% 


第 14 章 曾经 介绍 过 使 用 try.….catch 语 句 来 捕获 运动 时 错误 并 妥善 地 
处 理 ， 而 Try. these0 函 数 提供 一 种 简洁 的 方式 封装 了 这 些 方法 ， 实 现 跨 
浏览 器 的 解决 方案 : 


return Try.these(function1(),function2(),function3(), ...); 


其 中 的 函数 会 依次 执行 ， 当 错误 发 生 时 ， 程 序 会 跳 转 到 下 一 
数 。 如 果 全 部 函数 都 正确 执行 ， 操 作 就 会 停止 ， 返 回 值 是 true。 


把 这 个 方式 用 于 色 
fg: 
return Try.these ( 
function() {return new ActivexXObject('Msxm12.XMLHTTP')}, 
function() {return new ActivexObject( 'Microsoft.XMLHTTP')}, 
function() {return new XMLHttpRequest ()} 
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建 XMLHttpRequest 实 例 ， 可 以 得 到 很 简洁 的 代 


i 把 程序 清单 16.1 与 上 段 代码 相 比 ， 就 可 以 看 出 代码 得 到 了 多 好 的 简化 ， 而 且 提 高 了 易 读 


























19.4.5 用 Ajax 对 象 包装 XMLHttpRequest 














prototype .js 定义 了 一 个 Ajax 对 象 ， 简化 开发 Ajax 程序 时 的 代 
码 。 它 的 一 些 类 封装 的 代码 可 以 发 送 服务 器 请 求 、 监视 请 求 的 过 程 、 处 
理 返 回 的 数据 。 




















Ajax.Request 





var myAjax=new Ajax.Request(url, {method: 'post', parameters: mydata, onCo 
mplete: responseFunction} ); 











在 这 一 行 代码 里 ，un 表 示 服 务 器 资源 的 地 址 ，method 可 以 是 post 或 
get，mydata 是 包含 请 求 参数 的 序列 化 字符 串 ，responseFunction 是 处 理 
服务 器 响应 的 回调 PKI 数 的 名 称 o 




















提示: 


第 二 个 参数 是 使 用 JSON 标 签 构 造 。 很 多 流行 的 JavaScript 库 都 会 尽 可 能 地 使 用 JSON， 包 
括 YUI Library, Prototype. jQuery. Dojo Toolkit 和 MooTools。 






































onComplete 参 数 是 对 应 于 XMLHttpRequest 的 readyState 属 性 的 若干 
值 之 一 。 它 相当 于 readyState=4， 也 就 是 完成 状态 。 如 果 想 指定 在 其 他 
状态 下 调用 的 回调 函数 ， 对 应 于 “加 载 中 *、“ 已 经 加 载 "、“ 交 互 ” 状 态 的 


参数 是 onLoading、onLoaded 和 onInteractive。 






















































































还 有 其 他 一 些 参数 ， 比 如 asynchronous:false 表 示 服 务 器 调用 应 该 是 
同步 的 ， 它 的 默认 值 是 true。 

















Ajax.Updater 


在 很 多 情况 下 ， 我 们 需要 让 返回 的 数据 更 新 页 面 元 素 ， 使 用 
Ajax.Updater 类 可 以 简化 这 种 工作 ， 我 们 要 做 的 就 是 指定 要 更 新 的 元 
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en 











Mb 









































var myAjax=new Ajax.Updater(elementID,url,options); 






































这 类 似 于 调用 Ajax.Request， 只 是 第 一 个 参数 是 目标 元 素 的 ID。 下 
面 是 Ajax.Updater 的 范例 代码 。 








<script> 
function updateDIV(mydiv) { 

var url = ‘http://example.com/serverscript.php' ; 

var params = 'param1=value1&param2=value2' ; 

var myAjax = new Ajax.Updater ( 
mydiv, 
url, 
{method: 'get', parameters: params} 


} 
</script> 
<input type="button" value="Go" 
onclick="updateDIV(targetDiv) "> 
<div id="targetDiv"></div> 








>E 


调用 这 个 类 也 有 一 些 额 外 的 可 选 参数 ， 比 如 evalscripts:true， 会 让 服 
务 器 返回 的 JavaScript 代 码 得 到 运算 。 











> 上 




















Ajax.PeriodicalUpdater 




















这 个 类 可 以 反复 使 用 来 创建 Ajax.Updater 实 例 ， 从 而 实现 页 面 元 素 
以 一 定时 间 间 隔 进 行 更 新 。 这 种 功能 对 于 像 股票 走势 软件 或 RSS 阅 读 器 
之 类 的 应 用 是 很 有 用 的 ， 确 保 用 户 能 够 获得 及 时 更 新 的 数据 。 


与 Ajax.Updater 相 比 ，Ajax.PeriodicalUpdater 又 多 了 以 下 两 个 参数 。 


































































































e frequency: 更 新 闻 隔 的 时 间 ， 默 认 是 2 秒 。 
。 decay: 一 个 乘 数 因子 。 它 是 当 服务 器 返 本 的 数据 没有 变化 时 ， 间 
隔 时 间 要 增加 的 位 数 。 默 认 值 是 1， 也 就 是 不 改变 间隔 时 间 。 


下 面 是 Ajax.PeriodicalUpdater 的 一 个 范例 : 















































var myAjax = new Ajax.PeriodicalUpdater(elementID, url, {frequency: 3.0, 
decay: 2.0}); 

这 条 语句 把 时 间 间 隔 设置 为 9， 当 服务 器 返 
就 会 把 间隔 延长 一 倍 。 








p.i 





的 数据 没有 改变 时 ， 












































实践 
股票 价格 阅读 器 


现在 利用 prototype.js 库 开发 一 个 简单 的 应 用 ， 定 期 从 服务 器 获得 最 新 的 数据 。 在 本 例 
中 ， 我 们 利用 一 个 简单 的 服务 器 端 脚 本 rand.php 来 模拟 不 断 变 化 的 股票 价格 : 


<?php 
srand ((double) microtime( )*1000000 ) ; 
$price = 50 + rand(0,5000)/100; 
echo "$price"; 
?> 

这 段 脚本 首先 调用 srand0 函 数 ， 使 用 从 当前 时 间 获 得 的 数据 作为 参数 ， 对 PHP 的 随机 
数 函 数 进行 初始 化 ;然后 使 用 rand(0,5000) 生 成 随机 数 ， 进 行 一 定 的 运算 之 后 得 到 50.00 到 
100.00 之 间 的 数值 ， 用 于 模拟 股票 价格 。 

现在 建立 一 个 简单 的 HTML 来 显示 当前 股票 价格 。 它 也 反映 了 Ajax 程 序 的 基本 结构 : 


















































































































































<!DOCTYPE html> 
<html> 
<head> 
<script src="prototype.js"></script> 
<title>Stock Reader powered by Prototype. js</title> 
</head> 
<body> 
<h2>Stock Reader</h2> 
<p>Current Stock Price:</p> 
<div id="price"></div> 
</body> 
</html> 


在 这 段 脚本 中 ， 我 们 在 文档 头 部 的 <script> 标 签 引用 了 prototype.js 库 ， 还 设置 了 一 个 id 
为 price 的 <div>， 用 于 显示 当前 股票 价格 。 




































































接 下 来 的 工作 是 使 用 Ajax.PeriodicalUpdater 类 ， 把 它 附 加 到 body 元 素 的 onLoad 事 件 处 
理 器 。 程 序 清单 19.1 展 示 了 完整 的 脚本 。 


程序 清单 19.1 ”使 用 prototype.js 的 Ajax 股票 价格 阅读 器 









































<!DOCTYPE html> 
<html> 
<head> 
<title>Stock Reader powered by Prototype. js</title> 
<script src="prototype.js"></script> 
<script> 
function checkprice() { 
var myAjax = new Ajax.PeriodicalUpdater('price', ‘rand.php' 
{method: 'post', frequency: 3.0, decay: 1}); 
} 
window.onload = checkprice; 
</script> 
</head> 
<body> 
<h2>Stock Reader</h2> 
<p>Current Stock Price:</p> 
<div id="price"></div> 
</body> 
</html> 


从 这 段 代 码 就 可 以 看 出 ， 通 过 使 用 prototype.js 可 以 大 大 简化 代码 。 比 如 这 个 程序 只 需 
要 定义 一 个 函数 checkprice() 来 实例 化 重复 的 Ajax 调用 ， 然 后 从 body 元 素 的 onLoad 事 件 处 理 
器 调用 它 就 可 以 了 。 


从 Ajax.PeriodicalUpdater 的 参数 可 以 看 出 ， 时 间 间 隔 设置 为 3 秒 。decay 值 设置 为 1， 表 
示 即 使 从 服务 器 返回 的 数据 没有 变化 ， 也 不 会 延长 刷新 闻 隔 。 


图 19.1 展 示 了 程序 运行 的 情况 。 当 然 ， 图 中 没有 展示 出 每 隔 3 秒 数值 就 会 变化 的 效 








































































































果 。 








A Stock Reader powered by Prototype.js - Chromium a-+%X 
@ Stock Reader powere Ne 


所 C ft (© wwwmousewhisperer.co.uk/tyjs/1 9listingO 1 htrr Y | 加 加 过 外 














Stock Reader 


Current Stock Price: 


91.51 








图 19.1 Ajax 股票 阅读 器 


这 个 简单 的 范例 并 没有 完全 展现 prototype.js 的 强大 功能 ， 只 是 为 我 们 提供 了 一 个 了 解 
它 的 切入 点 。 














19.5 ”小结 


在 很 多 情况 下 ， 利 用 库 都 能 简化 JavaScript 的 编写 过 程 。 这 些 库 把 常 
用 的 对 象 和 方法 包装 为 更 便于 使 用 的 形式 ， 让 程序 员 在 添加 或 删除 事件 
监听 器 或 是 实例 化 XMLHttpReguest 对 象 时 个 必 再 担心 跨 浏览 器 的 问 

题 。 本 章 只 是 简单 介绍 了 几 个 最 常用 的 JavaScript 库 。 























































































































19.6 问答 








问 : AER 


























引用 第 三 方 JavaScript 库 ? 
> 方法 HJ 








答 : 对 于 不 同 的 







































































能 稍 有 不 同 。 通 常 来 说 ， 引 用 一 个 或 
多 个 外 部 .js 文件 的 最 简单 方法 是 在 页 面 的 <head> 部 分 。 具 体 的 细节 可 以 
参考 随 库 提供 的 文档 。 









































H: 在 一 个 脚本 里 能 否 使 用 多 个 第 三 方 库 ? 


答 : 能 。 从 理论 上 说 ， 如 果 库 文件 的 设计 
相干 扰 ， 组 合 使 













































































与 编写 都 考虑 到 了 不 互 
它们 就 不 会 有 问题 。 而 事实 上 ， 这 取决 于 我 们 要 使 
的 库 以 及 它们 的 编写 方式 。 


























19.7 作业 
请 先 回答 问题 ， 再 参考 后 面 的 答案 。 




















19.7.1 测验 
1. 下 面 哪个 选项 不 是 JavaScript 库 


se 





a. MooTools 
b. Prototype 
c. Ajax 
2. 如 何 自己 扩展 jQuery? 
a. jQuery 不 能 扩展 
b、 编 写 服务 器 端 脚本 
c. 编写 插件 或 使 用 预 置 插件 
> 


3. script.aculo.us 使 用 了 哪个 第 三 方 JavaScript 库 ? 






















































































a. Prototype 
b. Dojo 
c. jQuery 


19.7.2 答案 


1. 选 c。Ajax 是 一 种 让 脚本 利用 服务 器 资源 的 编程 技术 。 有 很 多 库 
可 以 帮助 我 们 实现 Ajax 功能 ， 但 Ajax 本 身 不 是 一 个 库 。 


2. 选 c。jQuery 对 插件 的 支持 非常 好 。 










































































3. 选 a。scriptaculo.us 使 用 
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19.8 ”练习 
编写 一 个 简单 的 脚本 来 使 用 
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http://www. prototypejs.org 的 范例 脚本 。 








访问 http://script.aculo.us ， 查 看 它 的 完整 功能 列 妹 


使 用 Prototype 库 ， 或 是 使 
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20 jQuery 入 门 













































































本 章 主 要 内 容 包 括 : 

在 页 面 里 引用 jQuery 

jQuery 的 $(document).ready 处 理 器 
渴 择 页 面 HICA 

操作 HTML 内 容 

显示 和 隐藏 元 素 

元 素 动画 

命令 链 

处 理事 件 

在 Ajax 应 用 里 使 用 jQuery 



































虽然 存在 着 很 多 JavaScript 库 ， 但 jQuery 显然 是 最 常用 的 ， 而 且 几 乎 
































是 最 容易 扩展 的 一 个 。 大 量 开发 人 员 给 jQuery 提供 了 开 ; 原 的 插件 ， 让 我 












































乎 可 以 为 任何 应 用 找到 适当 的 插件 。 这 些 范围 广泛 的 插件 和 易于 使 





















































简单 语法 让 jQuery 成 为 一 个 “伟大 ”的 库 。 CORRAL TBE EAE M 
现 一 下 它 的 强大 功能 。 






























































20.1 在 页 面 里 引用 jQuery 
在 使 用 jQuery 之 前 ， 我 们 需要 在 页 面 里 引用 它 。 主 要 的 方式 有 两 
种 ， 详 情 如 下 。 


20.1.1 下 载 jQuery 


WE JI) Aihttp://docs.jquery. e 可 以 下 载 






































































































































jQuery， 它 有 压缩 版 和 非 压缩 版 。 压 缩 版 是 用 于 运行 站 点 的 ， 文 件 体积 
比较 小 。 

在 开发 环境 中 建议 使 用 非 压 缩 版 ， 它 包含 了 格式 整齐 、 良 好 注释 的 
源 代 码 ， 便 于 我 们 观察 jQuery 是 如 何 工作 的 。 

我 们 需要 在 页 面 的 <head> 部 分 用 <script> 标 签 包 含 jQuery 库 ， 最 简单 
ARAH F Mique, .js 文件 放 到 与 页 面相 同 的 文件 夹 ， i FEDS 文 样 
引用 











<script src="jquery-1.7.1.js"></script> 


























































































































当然 ， 如 果 jQuery 文 件 保存 在 其 他 文件 来， 就 要 相应 地 修改 src 属 性 
里 的 路 径 

jQuery 实际 的 文件 名 取决 于 下 载 的 版 本 。 在 本 书 编写 时 的 版 本 是 1.7.1。 
20.1.2 ”使 用 远程 方式 

除了 下 载 使 用 jQuery 外 ， 我 们 还 可 以 用 “内 容 分 发 网 络 ”， 也 就 是 
CDN 的 方式 引用 它 。 除 了 不 必 下 载 jQuery 之 外 ， gg ae 
优点 : :_ 当 浏览 器 需要 更 用 jQuery 时 ， 它 很 可 能 已 经 在 缓存 里 了 ;， 另外， 
CDN 通 常 能 够 保证 从 最 近 地 理 位 置 的 服务 器 提供 文件 ， 从 [减少 加 载 时 
间 。 

官方 jQuery 站 列 出 的 CDN 包 括 : 











Google Ajax API CDN 
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 
Microsoft CDN 
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js 
jQuery CDN 
http://code.jquery.com/jquery-1.7.1.min.js C 简化 版 ) 
http://code.jquery.com/jquery-1.7.1.js ( 完全 版 ) 
根据 不 同 的 CDN 来 设置 <script> 标 签 里 的 内 容 ， 比 如 : 


<script 


src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
</script> 


除非 有 特定 的 理由 要 在 自己 的 服务 器 上 加 载 jQuery， 一 般 情况 下 
CDN 方 式 是 更 好 的 选择 。 






























































提示: 

















如 果 想 确保 使 用 最 新 版 的 jQuery， 可 以 链接 到 http://code.jquery.com/jquery-latest.min.js 。 








20.2 jQuery 的 $(documenb.ready 处 理 器 
本 书 中 多 次 了 window.onload 处 理 器 ， 而 jQuery 具有 自己 相应 的 方 






































法 : 





$(document).ready(function() { 
// jQuery 代码 
H; 























一 般 情况 下 ， 我 们 编写 的 很 多 代码 会 从 类 似 这 样 的 语句 里 执行 。 
与 window.onload 一 样 ， 它 完成 两 件 事情 : 
。 确保 在 DOM 可 用 之 后 ， 也 就 是 确保 代码 中 可 能 访问 的 元 素 都 已 经 


存在 了 ， 再 执行 代码 ， 从 而 避免 产生 错误 。 
。 把 语义 层 (HTML) 和 表现 层 (CSS) 分 离开 ， 让 代码 更 加 清晰 。 














































































































JQuery 相 比 window.onload 还 有 一 个 优点 ， 不 是 一 定 要 等 到 页 面 加 载 
完成 才 运行 代码 。 在 使 用 jQuery 的 $(document).ready 时 ， 只 要 DOM 树 构 
造 完成 ， teat a a 而 不 会 等 到 图 像 和 其 他 资源 都 加 载 完毕 ， 
这 对 改善 性 能 略 有 帮助 。 
















































































20.3 ”选择 页 面 元 素 





















































使 用 范例 : 


在 jQuery 里 ， 利 用 操作 符 $("") 就 可 以 选择 HTML 元 素 。 下 面 是 一 些 





$("span"); ”// 全 部 span 元 素 

$("#elem"); //id 为 "elem" 的 HTML 元 素 
$(".classname"); // 类 为 "classname" 的 HTML 元 素 
$("div#elem"); ”//id 为 "elem" 的 <div> 元 素 

$("ul li a.menu"); // 类 为 "menu" 且 拒 套 在 列表 项 里 的 锚 点 
$("p > span"); //p 的 直接 子 元 素 span 
$("input[type=password]"); // 具 有 指定 类 型 的 输入 元 素 
$("p:first"); // 页 面 上 第 一 个 段落 

$("p:even"); // 全 部 偶数 段落 











在 这 个 操作 符 里 也 可 以 使 用 单 引号 ，$(")。 
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关于 DOM 和 CSS 的 选择 符 就 是 上 述 这 些 ， 但 jQuery 还 有 


制 的 选择 符 ， 比 如 : 





$(":header"); // 标 题 元 素 Ch1 到 h6) 
$(":button"); // 全 部 按钮 元 素 (输入 框 或 按钮 ) 
$(":radio"); // 单 选 钮 

$(":checkbox"); // 选 择 框 

$(":checked"); // 选 中 状态 的 选择 框 或 单 选 钮 

















前 面 这 几 条 jQuery 语句 都 会 返回 一 个 对 象 ， 其 中 包括 由 指定 DOM 元 
素 组 成 的 数组 。 这 些 语句 并 没有 实际 操作 ， 只 是 从 DOM 获 取 相 应 的 元 











素 。 后 面 的 章节 会 介绍 如 何 操作 这 些 元 素 。 








20.4 操作 HTML 内 容 


操作 页 面 元 素 内 容 是 最 能 体现 jQuery 高 效 工作 的 方面 之 一 。html() 
和 text() 方 法 能 够 获取 和 设置 选中 元 素 的 内 容 ， 而 attr0 可 以 获取 和 设置 单 
个 元 素 的 属性 。 下 面 来 看 一 些 范例 。 






























































20.4.1 html0 








这 个 方法 能 够 获取 元 素 或 一 组 元 素 的 HTML 内 容 ， 类 似 于 JavaScript 
的 innerHTML: 





var htmlContent = $("#elem").html(); 

/* variable htmlContent now contains all HTML 
{including text) inside page element 

with id "elem" */ 





变量 htmlContent 就 会 包含 id 为 “elem” 的 页 面 元 素 内 部 的 全 部 
HTML (包括 文本 ) 。 





























使 用 类 似 的 语法 ， 就 可 以 设置 元 素 或 一 组 元 素 的 HTML 内 容 : 


$("#elem").html("<p>Here is some new content.</p>"); 
/* page element with id "elem" 
has had its HTML content replaced*/ 


这 样 就 会 修改 id 为 “elem” 的 页 面 元 素 的 HIML 内容。 

















20.4.2 text() 














水 




















如 果 只 是 想 获得 一 个 元 素 或 一 组 元 素 的 文本 内 容 ， 除 了 使 用 html0) 
外 ， 还 可 以 使 用 text(): 


























var textContent = $("#elem").text(); 

/* variable textContent contains all the 
text (but not HTML) content from inside a 
page element with id "elem" */ 


变量 textContent 就 会 包含 id 为 “elem” 的 页 面 元 素 内 部 的 全 部 文本 
(不 包括 HTML) 。 


同样 地 ， 它 也 可 以 设置 元 素 的 文本 内 容 : 
$("#elem").text("Here is some new content."); 
/* page element with id "elem" 
has had its text content replaced*/ 

这 样 就 会 修改 id 为 “elem” 的 页 面 元 素 的 文本 内 容 。 

如 果 想 给 元 素 添 加 文本 内 容 而 不 是 替换 其 中 的 内 容 ， 可 以 这 样 做 : 


$("#elem").append("<p>Here is some new content.</p>"); 
/* keeps current content intact, but 
adds the new content to the end */ 


这 样 会 在 保持 原 有 内 容 的 基础 上 ， 添 加 新 的 内 容 。 
类 似 地 : 


$("div").append("<p>Here is some new content.</p>"); 
/* add the same content to all 
<div> elements on the page. */ 


会 给 页 面 上 全 部 <div> 元 素 添 加 一 些 内 容 。 






















































































20.4.3 attr() 





























当 应 用 于 一 个 元 素 时 ， 这 个 方法 返回 特定 属性 的 值 。 


var title = $("#elem").attr("title'); 
如 果 应 用 于 一 组 元 素 ， 它 只 返回 第 一 个 元 素 的 值 。 
利用 这 个 方法 还 可 以 设置 属性 的 值 : 

$("#elem").attr("title", "This is the new title"); 













































































20.55 ”显示 和 隐藏 元 素 


人 
style 对 象 的 display 或 visibility 属 性 来 实现 的 。 这 种 方法 没有 什么 问题 
但 通常 会 导致 比较 长 的 代码 : 


document.getElementById("elem").style.visibility = 'visible'; 


利用 人 以 只 用 较 短 的 代码 实现 相同 的 
功能 ， 而 且 还 具有 额外 一 些 功能 。 
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20.5.1 show() 














show(0) 方 法 可 以 让 单个 元 素 或 一 组 元 素 显示 在 页 面 上 : 








$("div").show(); // 显 示 全 部 <div> 元 素 

















另外 ， 还 可 以 添加 一 些 参数 来 调整 显示 的 过 程 。 








在 下 面 的 范例 里 ， 第 一 个 参数 “fast* 决 定 了 显示 元 素 的 速度 。 这 个 
aes 了 可 以 设置 为 fast 或 slow 外 ， 还 可 以 用 数字 表示 特定 时 间 
毫秒 ) 。 如 果 不 设置 这 个 参数 ， 元 素 就 会 立即 显示 ， 没 有 任何 动画 


“slow” 对 应 的 数值 大 约 是 600 毫 秒 ，*fast" 对 应 的 数值 大 约 是 200 毫 秒 。 


第 二 个 参数 类 似 于 回调 函数 ， 能 够 在 显示 完成 时 执行 一 次 操作 。 








































































































$("#elem").show("fast",function() { 
// 在 元 素 显示 之 后 进行 某 些 操作 
H; 

















H 








命名 函数 也 是 可 以 的 。 




















本 例 中 使 用 的 是 匿名 函数 ， 当 然 使 























20.5.2 hide() 

















这 个 方法 的 用 途 显 然 与 show0O 是 相反 的 ， 
些 像 show() 一 样 的 可 选 参 数 : 








d 



































于 隐藏 页 面 元 素 。 它 也 





$("#elem").hide("slow",function() { 
// 在 元 素 隐藏 之 后 进行 某 些 操 作 
H; 








20.5.3 toggle() 





$("#elem").toggle(1000,function() { 
// 在 元 素 显 示 或 隐藏 之 后 进行 某 些 操 作 
H; 

















这 个 方法 会 改变 一 个 元 素 或 一 组 元 素 的 当前 显示 状态 ， 也 就 是 说 把 














有 关于 变化 速度 及 回调 函数 的 参数 。 





























处 于 显示 状态 的 元 素 隐藏 起 来 ， 把 处 于 隐藏 状态 的 元 素 显示 出 来 。 它 也 























show()、hide() 和 toggle() 方 法 都 可 以 应 用 于 一 组 元 素 ， 这 些 元 素 会 同时 显示 或 隐藏 。 











20.6 元素 动画 


jQuery 提供 的 一 些 标准 效果 就 已 经 相当 强大 了 。 第 15 章 曾经 介绍 过 
如 何 使 用 元 素 的 opacity 属 性 和 JavaScript 定 时 器 实现 元 素 淡 入 淡出 | 的 效 
果 ， 而 这 些 操作 都 已 经 漂亮 地 包装 在 jQuery 的 一 些 方法 里 ， 只 需 作 
调用 就 可 以 应 用 于 单个 或 一 组 元 素 。 






































































































































20.6.1 AHE 
在 实现 元 素 淡 入 淡出 的 同时 ， 还 可 以 设置 持续 时 间 和 回调 函数 。 
淡出 的 操作 是 这 样 的 : 














kai 












































$("#elem").fadeOut("slow",function() { 
// 在 淡出 之 后 进行 一 些 操作 
H; 








的 : 


二 


淡 入 的 操作 是 这 档 








$("#elem").fadeIn(500,function() { 
// 在 淡 入 之 后 进行 一 些 操 作 
H; 




















EG 


还 可 以 让 元 素 只 进行 部 分 淡 入 或 淡出 : 





$("#elem") .fadeTo(3000,0.5,function() { 
// 在 淡 入 或 淡出 之 后 进行 一 些 操作 
H; 



































其 中 第 二 个 参数 《本 例 是 0.5) 代表 最 终 的 不 透明 度 ， AMER ee 
设 的 不 透明 度 。 不 管 元 素 曾经 的 不 透明 度 是 多 少 ， 在 执行 上 述 语句 之 
后 ， 它 都 会 变 成 第 二 个 参数 所 指 定 的 值 。 
























































20.6.2 ”滑动 








jQuery SEI 7G ZTE DRNA SIR AR EH I A a EAT 
的 参数 具有 同样 的 规则 ， 可 以 实现 单个 或 一 组 元 素 的 向 上 或 向 下 滑动 。 























$("#elem").slideDown(150,function() { 
// 向 下 滑动 之 后 进行 一 些 操作 
H; 

















向 上 滑动 是 这 样 的 : 








$("#elem").slideUp("slow",function() { 
// 向 上 滑动 之 后 进行 一 些 操作 
H; 





















































为 了 实现 根据 元 素 目前 位 置 自 动 决定 是 向 上 滑动 还 是 向 下 滑动 ， 
jQuery 还 提供 了 slideToggle() 方 法 。 

















$("#elem").slideToggle(1000,function() { 
// 向 上 或 向 下 滑动 之 后 进行 一 些 操作 
H; 











20.6.3 ”动画 
































实现 动画 的 方法 很 简单 ， 利 用 jQuery 指定 元 素 要 使 用 CSS 样 式 表 ， 
jQuery 就 以 渐变 方式 应 用 CSS 样 式 ， 而 不 是 像 普 通 的 CSS 或 JavaScript 那 
样 直接 应 用 ， 从 而 实现 动画 的 效果 。 


animate() 方 法 可 以 应 用 于 很 多 CSS 属 性 。 下 面 的 范例 中 把 元 素 的 宽 
度 和 高 度 动画 到 400 像 素 x500 像 素 ， 并 且 在 动画 完成 之 后 ， 利 用 回调 函 
数 把 元 素 淡出 为 隐藏 。 
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$("#elem") .animate( 
{ 
width: "400px", 
height: "50@px" 
}, 1500, function() { 
$(this) .fadeOut ("slow"); 


) 


20.7 命令 链 
jQuery 的 大 多 数 方法 都 返回 一 个 jQuery 对 象 ， 可 以 用 于 再 调用 其 他 


ie 这 是 jQuery 的 另 一 个 方便 之 处 。 比 如 可 以 像 这 样 组 合 前 面 的 范 
j 


$("#elem").fade0ut().fadeIn(); 


上 面 这 行 代码 会 先 淡出 指定 的 元 素 ， 然 后 淡 入 显示 它们 。 命 令 链 的 
长 度 没有 什么 限制 ， 从 而 可 以 对 同一 组 元 素 连 续 进 行 很 多 操作 : 


$("#elem").text("Hello from jQuery").fadeOut().fadeIn(); 






















































































简单 的 jQuery 动画 
现在 来 利用 前 面 介 绍 的 内 容 实现 一 个 简单 的 动画 。 


HTML 页 面 最 初 会 显示 一 个 <div> 元 素 ， 它 的 样式 由 CSS 设 置 ， 但 其 中 没有 内 容 。 有 具体 
的 HTML 代码 如 下 : 















































<!DOCTYPE html> 


<html> 
<head> 


<style> 


#animateMe { 


} 


</style> 


</head> 
<body> 


position:absolute; 
width: 10@px; 

height: 400px; 

top: 100px; 

left: 100px; 

border: 2px solid black; 
background-color: red; 
padding: 20px; 


<div id="animateMe"></div> 


</body> 
</html> 


接 下 来 首先 要 在 页 面 和 





有 添加 <script> 元 素 ， 以 CDN 方 式 链接 到 jQuery 库 : 





<script src="http://code.jquery.com/jquery-latest.min. j EET 





为 了 以 CDN 方 式 使 用 jQuery， 计 算 机 需要 连接 到 互联 网 ， 和 否则 就 只 能 使 用 本 地 的 jQuery 库 了 。 

然后 利用 text0 方 法 给 <div> 元 素 添加 一 些 文本 : 
$("#animateMe").text("Changing shape...") 

然后 对 元 素 的 大 小 及 形状 ) 进行 动画 























$("#animateMe").animate( 


width: "400px", 

height: "200px" 
}, 5000, function() { 

// 回 调 函数 






































于 text0 和 animate() 方 法 是 对 同一 个 元 素 进行 操作 ， 我 们 可 以 用 命令 链 的 方式 实现 : 








$("#animateMe").text("Changing shape...").animate( 


width: THERES 5 
height: "200px" 

» 5000, function() { 
// 回调 函数 














在 动画 结束 之 后 ， 我 们 会 修改 元 素 里 的 文本 ， A 。 在 此 ， 我 们 让 两 
个 命令 形成 命令 链 ， 并 且 利用 animate0) 的 回调 函数 在 动画 结束 之 后 实现 这 种 效果 。 


$("#animateMe").text("Changing shape...").animate( 


{ 












































width: "4@@px", 
height: "200px" 
}, 5000, function() { 
$(this).text("Fading away ...").fadeOut (4000) ; 


) ; 


注意 其 中 使 用 了 关键 字 this， 这 是 因为 方法 是 作用 于 父 元 素 $(“#animateMe”) 的 ， 所 以 
在 这 个 代码 块 内 部 使 用 this 来 引用 父 元 素 。 


最 后 ， 我 们 把 上 述 代 码 包装 到 jQuery 的 $(document).ready 处 理 器 ， 确 保 在 DOM 准 备 好 






















































































之 后 执行 这 些 操作 。 
完整 的 代码 如 程序 清和 


20.1 所 示 。 





外 20.1 





-个 简 


单 的 jQuery 动画 





<!DOCTYPE html> 

<html> 

<head> 

<style> 
#animateMe { 

position:absolute; 
width: 100px; 
height: 400px; 
top: 100px; 
left: 100px; 
border: 2px solid black; 





background-color: red; 
padding: 20px; 











} 
</style> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
$(document).ready(function() { 
$("#animateMe").text("Changing shape...").animate( 
{ 
width: "400px", 
height: "200px" 
}, 5000, function() { 
$(this).text("Fading away ...").fadeOut (4000) ; 
} 
); 
}); 
</script> 
</head> 
<body> 
<div id="animateMe"></div> 
</body> 
</html> 
页 面 加 载 之 后 应 该 显示 一 个 红色 <div> 元 素 ， 具 有 黑色 边框 ， 其 中 内 容 是 “Changing 
























































shape..…..”， 在 动画 变化 为 新 的 宽度 和 高 度 之 后 ， 划 中 的 内 容 会 变 为 “Fading away...”, #H 
整个 元 素 淡出 消失 。 图 20.1 展 示 了 这 个 动画 过 程 。 





























图 Anmating with jQuery = 
€ > CŒ ft @ file:/home/phil/SAMsy2olisting 











@ animating with jQuery x 
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Woon 

















20.8 ”处 理事 件 


在 jQuery 里 可 以 用 多 种 方式 给 单个 元 素 或 一 组 元 素 添 加 事件 处 理 
器 。 首 先 ， 最 直接 的 方法 是 这 样 的 : 






























































$("a").click(function() { 
// 当 锚 点 元 素 被 点 击 时 要 执行 的 代码 
H; 
































或 者 像 下 面 这 样 使 用 命名 的 函数 : 
function hello() { 
alert("Hello from jQuery"); 























} 
$("a").click(hello) ; 
在 上 面 这 两 个 范例 里 ， 当 锚 点 被 点 击 时 ， 就 会 执行 指定 的 函数 。 


jQuery 里 其 他 常见 的 事件 包括 blue、focus、hover、keypress、change、 
mousemove、resize、scroll、submit 和 select。 
























































jQuery 以 跨 浏 览 器 的 方式 包装 了 attachEvent 和 addEventListener 方 
法 ， 从 而 便于 添加 多 个 事件 处 理 器 : 


$("a").on('click', hello); 























on() 方 法 是 在 jQuery 1.7 引 入 的 ， 用 于 取代 以 前 一 些 事 件 处 理 方 法 ， 包 括 bind()、delegate() 
和 1live0。 详 情 请 见 jQuery 文 档 。 


on() 方 法 可 以 给 原本 存在 于 HTML 页 面 的 元 素 或 者 动态 添加 DOM 的 
元 素 添加 处 理 器 。 
































20.9 ”使 用 jQuery 实现 Ajax 


第 16 章 和 第 17 章 介绍 了 Ajax 的 基本 要 点 ， 它 可 以 在 后 台 与 服务 器 之 
间 进 行 通信 ， 在 不 刷新 页 面 的 情况 下 显示 得 到 的 结果 ， 从 而 让 页 面 与 
户 的 交互 更 加 顺畅 。 


于 不 同 浏览 器 以 不 同方 式 实现 XMLHttpRequest 对 象 ，Ajax 编 程 显 
得 有 些 复杂 。 好 在 jQuery 解决 了 这 些 问 题 ， 让 我 们 可 以 用 很 少 的 代码 就 
可 以 编写 Ajax 程序 。 


jQuery 包含 不 少 执行 Ajax 对 服务 器 调用 的 方法 ， 这 里 介绍 其 中 最 党 
用 的 一 些 。 



















































































































































































20.9.1 load() 


如 果 只 FE i MAR Y 器 获取 一 个 文档 并 在 页 HIRERE, 那么 
只 需要 使 用 load0) 方 法 就 可 以 了 。 比 如 下 面 的 代码 片段 会 获取 
newContent.html， 并 且 把 它 的 内 容 添加 到 id 为 “elem” 的 元 素 : 


$(function() { 
$("#elem").load("newContent.html"); 






















































































}); 


在 使 用 load() 方 法 时 ， 除 了 指定 URL 外 ， 还 可 以 传递 一 个 选择 符 ， 
从 而 只 返回 相应 的 页 面 内 容 : 


$(function() { 
$("#elem").load("newContent.html #info"); 












































}); 





上 面 的 范例 在 URL 之 后 添加 了 一 个 jQuery 选择 符 ， 中 间 以 空格 分 
sa 回 选择 符 指 定 的 容器 里 的 内 容 ， 本 例 就 是 id 为 “info” 的 
元 素 。 















































为 了 弥补 load() 方 法 的 简单 功能 ，jQuery 还 提供 了 发 送 GET 和 POST 
请 求 的 方法 。 





20.9.2 get() 和 post() 


这 两 个 方法 很 类 似 ， 只 是 调用 不 同 的 请 求 类 型 而 已 。 调 用 这 两 个 方 
法 时 不 需要 选择 某 个 jQuery 对 象 ( 比 如 某 个 或 一 组 页 面 元 素 ) ， 而 是 下 
接 调用 : $.get() 或 $.post()。 在 最 简单 的 形式 中 ， 它 们 只 需要 一 个 参数 ， 
就 是 目标 URL。 
通常 情况 下 我 们 还 需要 发 送 一 些 数据 ， 它 们 是 以 “参数 / 值 ” 对 的 形式 
出 现 的 ， 以 JSON 风 格 的 字符 串 作 为 数据 格式 。 
大 多 数 情 况 下 ， 我 们 会 对 返回 的 数据 进行 一 些 处 理 ， 为 此 还 需要 把 
回调 函数 作为 参数 。 
$.get("serverScript.php", 
{param1: "valuei", param2: "value2"}, 
function(data) { 
alert("Server responded: " + data); 
































































































































HH 












































}); 
post(0) 方 法 的 语法 基本 上 是 相同 的 : 
$.post("serverScript.php", 
{parami: "valuei", param2: "value2"}, 


function(data) { 
alert("Server responded: " + data); 

















i 如 果 是 从 表单 字段 获取 数据 ，jQuery 还 提供 了 serialize0) 方 法 ， 能 够 对 表单 数据 进行 序列 





var formdata = 
$('#form1').serialize() 


20.9.3 ajax() 


















































ajax() 方 法 具有 很 大 的 灵活 怕 A 几乎 可 以 设置 关于 Ajax 调用 及 如 何 
处 理 响 应 的 各 个 方面 。 详 细 的 介绍 请 见 http://api.jquery.com/jQuery.ajax/ 
的 文档 。 






































实践 
使 用 jQuery 的 Ajax 表单 

















让 我 们 用 jQuery 实现 简单 的 Ajax 表单 提交 ， 以 此 结束 本 章 的 学 习 。 
要 处 理 的 表单 是 这 样 的 : 
<form id="formi"> 
Name<input type="text" name="name" id="name"><br /> 
Email<input type="text" name="email" id="email"><br /> 


<input type="submit" name="submit" id="submit" value="Submit Form"> 
</form> 


利用 jQuery 实现 如 下 操作 : 


查 并 确保 两 个 输入 字段 都 有 内 容 。 
HTTP POST 通过 Ajax 提交 表单 。 
有 务 器 返回 的 数据 显示 在 页 面 的 <div> 元 素 里 。 
为 了 检查 两 个 输入 字段 都 有 内 容 ， 只 需要 使 用 如 下 的 函数 : 
function checkFields() { 
return ($("#name").attr("value") && $("#email").attr("value")); 








































































































} 








当 两 个 输入 字段 的 value 属 性 都 包含 一 些 文本 时 ， 这 个 函数 才 会 返回 tue。 只 要 有 任何 


六 


一 个 字段 是 空 的 ， 空 字段 就 会 被 解释 为 false， 而 false 的 逻辑 “与 操作 的 结果 一 定 是 false。 


接 下 来 ， 利 用 jQuery 的 submit() 事 件 处 理 器 检测 表单 提交 动作 。 如 果 函 数 checkFields() 
返回 false， 默 认 操作 是 取消 提交 ;如果 返回 true，jQuery 会 对 数据 进行 序列 化 ， 并 且 向 服 
务 器 脚本 发 送 一 个 postO 请 求 。 






















































































jQuery 的 serialize() 方 法 可 以 获取 表单 信息 ， 进 行 序列 化 ， 满 足 Ajax 调用 的 需要 。 


在 这 个 范例 里 a eat php 并 没有 什么 实际 操作 ， 只 是 把 它 收 到 的 信息 调整 一 
下 格式 ， 以 HTML 形 式 返 F 
<?php 
echo "Name: " . $ REQUEST['name'] . "<br />Email: " . $_REQUEST['email']; 
2> 
























































最 后 ， 用 回调 函数 在 页 面 上 显示 返回 的 内 容 : 


function(data)t{ 
$("#div1").html(data); 





} 


完整 的 代码 如 程序 清单 20.2 所 示 。 





ig 


程序 清单 20.2 Ajax KÀ 











<!DOCTYPE html> 
<html> 
<head> 
<title>Ajax Form Submission</title> 


<script src="http://code.jquery.com/jquery-latest.min.js"></script> 


<script> 
$(document) .ready(function(){ 
function checkFields(){ 
return ($("#name").attr("value") && 
=»$("#email").attr("value")) 
} 
$("#form1").submit(function( ) { 
if (checkFields()){ 
$.post( 
'test.php', $("#formi").serialize(), 
function(data){ 
$("#divi").html(data) ; 


) ; 
} 
else alert("Please fill in name and email fields!"); 
return false; 
}); 
})3 
</script> 
</head> 
<body> 
<form id="form1"> 
Name<input type="text" name="name" id="name"><br /> 
Email<input type="text" name="email" id="email"><br /> 


<input type="submit" name="submit" id="submit" value="Submit 


Form"> 

</form> 

<div id="divi"></div> 
</body> 
</html> 


为 了 运行 这 个 范例 脚本 ， 还 需要 把 testphp 上 传 到 支持 PHP 的 Web 服 务 器 上 。 


尝试 在 一 个 或 两 个 字段 为 空 时 提交 表单 ， 这 样 会 让 脚本 发 出 一 个 警告 信息 ， 而 且 表 总 
不 会 被 提交 。 



































成 功 的 表单 提交 操作 会 在 页 面 上 显示 格式 化 之 后 的 内 容 ， 如 图 20.2 所 示 。 该 图 中 还 









































ZR J Firebug Lite 所 显示 的 关于 Ajax 调用 和 响应 的 细节 内 容 。 








NA Ajax Form Submission - Chromium 


/® Ajax Form Submission > A 
€ © ff |Qwww.mousewhisperer.co.uk/tyjs/20listingo2. ¥ | OnuFA 


Name|Phil Ballard 


Email |phil@example.com 


Name: Phil Ballard 
Email: phil@example.com 

















x Inspect Clear B00 
| Console | HTML css Script DOM 

E POST test.php 200 OK 149ms 

Headers | Post Response HTML 











Parameters application/x-www-form-urlencoded 





email philfexample.com 
name Phil Ballard 


Source 
name=Phil+Ballard&email=philt40example.com 














>>> 





图 20.2 ”使 用 jQuery 的 Ajax 表单 








20.10 小结 


本 章 介绍 了 jQuery 的 基本 知识 ， 展 示 了 它 如何 帮 助 我 们 编写 跨 浏览 
器 的 JavaScript 程 序 。 








20.11 问答 
H: jQuery 来 自 何 处 ? 


























答 : jQuery 由 John Resig 编 写 ， 发 布 于 2006 年 。 目 前 有 多 个 jQuery 





























项 目 ， 包 括 jQuery Core 〈 本 章 所 用 的 项 























绍 
行 维护 。 关 于 这 些 项 目 及 开发 4 











) 。 这 些 项 目 都 处 于 活跃 的 开发 状 


























H: jQuery 能 与 其 他 库 同 





答 : 是 的 ， jQuery 可 以 与 其 他 所 




















R 态 ， 由 John 和 一 个 志愿 者 小 组 进 
` 组 的 情况 可 以 参考 jquery.org。 

















对 使 








J19? 


会 有 冲突 吗 ? 





























同时 使 用 。 它 提供 了 








jQuery.noConflict0) 方 法 来 避免 六 


PR, YE 





情 请 见 





http://docs.jquery.com/Using_jQuery_with_Other_Libraries o 





目 ) 和 jQuery UI〈 第 21 章 将 有 所 


























20.12 ”作业 


请 先 回答 问题 ， 再 查看 后 面 的 答案 。 


























20.12.1 测验 

















1. 如 何 选择 页 面 上 全 部 具有 class="sidebar" 的 元 素 ? 

















a. §(".sidebar") 
b. §$(‘'class:sidebar") 
c. $(#sidebar) 


2. 表达 式 $("p:first").show0) 执 行 什 么 操作 ? 














a. 在 显示 其 他 元 素 之 前 ， 首 先 显示 段落 元 素 


b. 让 页 面 上 第 一 个 段落 元 素 是 可 见 的 






























































c 让 全 部 段落 元 素 的 第 一 行 是 可 见 的 




















3. 在 实现 淡 入 淡出 、 滑 动 和 动画 时 ， 值 fast" 相当 于 : 











a. 1 秒 
b. 600 上 毫秒 
c. 200 毫 秒 
20.122 ”答案 
1. ita. 
2. Xb. 
3. Vico 


20.13 练习 
习 本 书 前 面 一 些 章节 里 的 范例 ， 尝 试用 jQuery 重新 编写 。 


访问 jQuery 的 站 点 jquery.com， 查 看 其 中 的 文档 和 范例 ， 特 别 是 本 
章 没 有 介绍 的 一 些 jQuery 方法 。 







































































421% jQuery Ul (HP FE) Æ 


本 章 主 要 内 容 包 括 : 








使 用 ThemeRoller 
0 何在 页 面 引用 jQuery UI 
交互 : 拖 动 、 放 置 、 调 整 大 小 和 排序 
使 用 微 件 : 可 折 全 控件、 日 期 拾取 器 和 选项 卡 


前 一 章 介绍 了 jQuery 库 ， 本 章 介 绍 它 的 同伴 : jQuery UI. 




















































































































jQuery UI 提供 了 很 多 高 级 效果 和 主题 微 件 ， 可 以 帮助 我 们 建立 互动 
的 Web 应 用 。 




















21.1 jQuery UI 是 什么 ? 


jQuery 

















发 小 组 决定 提供 一 个 “ 






































流行 








的 用 


























人 少量 














只 用 少 





i 

















户 界面 组 件 ， 赋予 它们 统一 的 界面 风 格 。 
































的 代码 就 可 以 建立 高 度 交 互 且 样式 迷人 的 Web 
































jQuery UI 为 我 们 提供 了 : 


交互 性 。jQuery UI 支持 对 页 面 元 素 进 行 拖 放 、 调 整 


序 。 





微 件 。 这 些 功能 丰富 的 控件 包括 可 









































期 拾取 器 、 对 话 框 、 进 度 条 、 





主题 。 让 站 点 在 全 部 用 户 界面 组 件 都 具 











题 。 








一 致 性 ， 


























滑动 条 和 选项 卡 。 























“官方 ”的 jQuery 插件 集合 


， 集 中 大 量 








All} 

















IAA. 














致 的 观感 。 从 


j 这 些 组 件 ， 











尺寸 、 选 择 和 排 
折 登 控件 、 自 动 完成 、 按 钮 、 日 






































本 章 将 介绍 如 何 使 用 一 些 常 用 
户 界面 





利用 jQuery 文档 ， 


























http://jqueryui.com/themeroller 上 下 载 ThemeRoller 工 具 ， 
先 设置 的 很 多 设计 中 选择 主题 ， 也 可 以 根据 现 有 主题 创建 定 





的 插件 。 由 于 jQuery UI 














HA H 











读者 可 以 轻松 地 查看 








HA 











已 可 以 从 预 


制 的 了 











HERH 








也 的 插件 。 











21.2 ”如 何在 页 面 里 引用 jQuery UI 


第 一 步 是 访问 http:Wjqueryui.com/themeroller 的 jQuery ThemeRoller 
在 线 应 用 。 





























使 用 ThemeRoller 




















LK 


jQuery UI CSS 框 架 是 一 组 类 ， 满 足 了 相当 大 范围 的 用 户 界面 需求 。 
利用 ThemeRoller 工 具 ， 我 们 就 可 以 从 无 到 有 有 建立 自己 的 样式 ， 或 是 基 
于 http://jqueryui.com/themeroller/ 提供 的 大 量 范例 来 实现 自己 的 样式 。 
在 确定 了 样式 之 后 ，jQuery UI 会 提供 一 个 可 下 载 的 构造 器 ， 其 中 包 
含 了 我 们 所 需要 的 组 件 。 它 还 会 处 理 关 于 文件 依赖 的 问题 ， 避 免 下 载 的 
eevee 我 们 要 做 的 就 是 下 载 和 解压 这 个 压缩 文件 就 


文件 解压 缩 之 后 ， 会 得 到 如 下 的 目录 结构 : 
/css/ 
/development -bundle/ 
/js/ 


development-bundle 目 录 保 存 了 jQuery UI 源 代码 、 范 例 和 文档 。 如 
UI 代码 ， 把 这 个 目录 删除 就 可 以 了 ， 不 会 有 什么 问 



























































































































































































































































一 般 来 说 ， 我 们 需要 在 使 用 jQuery UI 微 件 和 交互 的 页 面 里 从 剩余 的 
其 他 文件 中 引用 主题 以 及 jQuery 和 jQuery UI: 








<link rel="stylesheet" type="text/css" href="css/themename/ 

= jquery-ui-1.8.18.custom.css" /> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/ 
=» jquery-ui.min.js"></script> 


如 果 是 使 用 标准 范例 的 主题 ， 就 可 以 利用 CDN 链 接 全 部 这 些 文件 : 


<link rel="stylesheet" type="text/css" 
=href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/ 
= jquery-ui.css"/ 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery 



























































21.3 交互 














21.3.1 拖 和 放 











先 来 看 看 jQuery UI 能 做 哪些 事情 来 改善 页 面 元 素 与 用 户 的 交互 。 






































使 用 jQuery UI 让 一 个 元 素 成 为 能 够 拖 放 的 再 简 











不 过 了 : 


$("#draggable").draggable(); 


























程序 清单 21.1 展 示 了 如 何在 HTML 页 面 里 实现 这 个 功能 。 


程序 清单 21.1 让 页 面 元 素 可 拖 动 











<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
=href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/ 
»jquery-ui.css"/> 
<style> 
#dragdiv { 
width: 100px; 
height: 100px; 
background-color: #eeffee; 
border: 1px solid black; 
padding: 5px; 
} 
</style> 
<title>Drag and Drop</title> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script 
ssrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/ 
jquery -ui.min.js"></script> 
<script> 
$(function() { 
$("#dragdiv").draggable(); 
H; 
</script> 


</head> 
<body> 
<div id="dragdiv"> Drag this element around the page!</div> 
</body> 
</html> 


当 页 面 加 载 之 后 ， 元 素 <div id="dragdiv"> 被 设置 为 可 拖 动 的 : 
$(function() { 
$("#dragdiv").draggable(); 























}); 























j 鼠 标点 击 这 个 元 素 ， 然 后 就 能 够 在 页 面 上 拖 动 它 了 ， 如 图 21.1 所 
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实践 
利用 jQuery UI 实现 元 素 的 拖 和 放 


为 了 让 某 个 元 素 能 够 接受 拖 放 到 它 的 男 一 个 元 素 ， 需 要 使 用 droppable() 方 法 。 这 个 方 
法 可 以 指定 用 于 多 个 事件 ， 比 如 可 拖 动 元 素 被 放下 、 经 过 可 拖 动 区 域 或 离开 可 拖 动 区 域 。 


现在 来 修改 程序 清单 21.1 的 代码 ， 添 加 一 个 更 大 的 div 元 素 作为 拖 放 区 域 : 
<div id="dropdiv">This is the drop zone ...</div> 
除了 要 让 拖 动 元 素 成 为 可 拖 动 的 ， 还 需要 把 这 个 新 div 指 定 为 可 放置 区 域 : 


$("#dropdiv").droppable() ; 


另外 ， 我 们 给 drop 和 out 事 件 处 理 器 添加 方法 ， 让 拖 动 元 素 里 的 文本 在 它 被 放下 或 离 
放置 区 域 时 有 相应 的 变化 。 




























































































$("#dropdiv") .droppable({ 

drop: function() { $("#dragdiv").text("Dropped!"); }, 

out: function() { $("#dragdiv").text("Off and running again ..."); } 
}); 


完整 的 代码 如 程序 清单 21.2 所 示 。 


























程序 清单 21.2 ”利用 jQuery UI 实现 拖 放 





<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
=href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/ 
»jquery-ui.css"/> <style> 
div { 
font: 12px normal arial, helvetica; 


} 

#dragdiv { 
width: 150px; 
height: 50px; 
background-color: #eeffee; 
border: 1px solid black; 
padding: 5px; 

} 

#dropdiv { 
position: absolute; 
top: 80px; 
left: 100px; 
width: 300px; 
height: 200px; 
border: 1px solid black; 
padding: 5px; 
} 

</style> 


<title>Drag and Drop</title> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/ 
=» jquery-ui.min.js"></script> 





<script> 
$(function() { 
$("#dragdiv") .draggable(); 
$("#dropdiv") .droppable({ 
drop: function() { $("#dragdiv").text("Dropped!"); }, 
out: function() { $("#dragdiv").text("Off and running 
wagain ..."); } 
}); 
H; 
</script> 
</head> 
<body> 
<div id="dropdiv">This is the drop zone ...</div> 
<div id="dragdiv">Drag this element around the page!</div> 
</body> 
</html> 


在 浏览 器 里 打开 这 个 页 面 ， 可 以 看 到 拖 动 的 页 面 元 素 可 以 被 放置 到 新 的 div 区 域 号 
还 会 相应 地 改变 文本 内 容 。 


当 我 们 把 拖 动 元 素 拖 出 放置 区 域 时 ， 它 的 文本 也 会 相应 变化 ， 如 图 21.2 所 示 。 
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[J Drag and Drop 
¢e,7 46 | © file:yhome;phil/SAMS/2.1listingo2.htm| wW 


Off and running again... 














This is the drop zone .. 





Dropped! 














This is the drop zone... 



































图 21.2 使 





有 jQuery UI 实现 拖 放 








21.3.2 ”调整 大 小 


使 用 jQuery UI 给 矩形 元 素 添加 调整 大 小 的 手柄 也 是 很 容易 的 ， 如 图 
21.3 所 示 。 


$( "#resizable" ).resizable(); 


This is the drop zone .. 
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图 21.3 添加 调整 大 小 的 手柄 


























作为 一 个 示范 ， 我 们 可 以 把 程序 清单 21.2 里 的 放置 区 域 以 命令 链 形 























式 添加 resizable() 方 法 : 


$(function() { 
$("#dragdiv").draggable(); 
$("#dropdiv") .droppable({ 
drop: function() { $("#dragdiv").text("Dropped!"); }, 
out: function() { $("#dragdiv").text("Off and running again 
wai Vg F 
}).resizable(); 
H; 


21.3.3 ”排序 


合用 sorable0 方 法 可 以 把 元 素 添 加 到 列表 ， 并 且 让 列表 可 以 进行 拓 
F: 
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$("#sortMe").sortable(); 








程序 清 身 





和 21.3 


<!DOCTYPE html> 


<html> 
<head> 








RAN SMUT SIC 


<link rel="stylesheet" type="text/css" 
=»href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/ 
= jquery-ui.css"/> 

















元 素 使 用 这 个 方法 。 


程序 清单 21.3 ”让 元 素 可 排序 





<title>Sortable</title> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/ 
=» jquery -ui.min.js"></script> 
<script> 
$(function() { 
$("#sortMe").sortable(); 
}); 
</script> 
</head> 
<body> 
<ul id="sortMe"> 
<li>One</1i> 
<1i>Two</1li> 
<1i>Three</1i> 
<li>Four</1i> 
<li>Five</li> 
</ul> 
</body> 
</html> 


如 果 把 某 个 元 素 拖 放 到 列表 的 新 位 置 ， 就 会 导致 列表 进行 排序 动 
作 ， 让 列表 形成 新 的 次 序 ， 如 图 21.4 所 示 。 



































[ J Sortable 





























21.4 列表 排序 








21.4 使 用 微 件 


微 件 是 一 种 界面 元 素 ， 在 提供 方便 功能 的 同时 ， 对 于 程序 的 影响 保 
持 在 最 小 程度 。 


21.4.1 Waa 


可 折 又 控件 让 用 户 在 一 组 div 元 素 里 可 以 一 次 只 展开 一 个 ， 而 其 他 
的 保持 在 只 显示 标题 的 状态 。 


首先 需要 在 语义 层 添加 数据 ， 方 法 是 使 用 多 个 标题 和 内 容 窗 格 : 
<div id="accordion"> 
<h3><a href="#">First header</a></h3> 
<div>First content</div> 
<h3><a href="#">Second header</a></h3> 
<div>Second content</div> 
</div> 
然后 在 外 层 容器 元 素 上 调用 accordion() 方 法 来 激活 折 车 控件 : 
$(function() { 
$( "#accordion" ).accordion(); 
















































































































































































}); 


FETTA R214 AWET, CERERA EK m EEE 
的 不 同 部 分 展示 。 












































程序 清单 21.4 ”使 用 可 折 且 控件 











<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
=href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/ 
=» jquery-ui.css"/> 
<title>Menu Choices</title> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/ 
=» jquery-ui.min.js"></script> 
<script> 
$(function() { 
$("#accordion").accordion(); 
}); 
</script> 
</head> 


<body> 
<h2>Choose from the following menu options 
<div id="accordion"> 
<h3><a href="#">Starters</a></h3> 
<div> 
<ul> 
<li>Clam Chowder</1i> 
<li>Ham and Avocado Salad</1i> 
<li>Stuffed Mushrooms</1i> 
<li>Chicken Liver Pate</1li> 
</ul> 
</div> 
<h3><a href="#">Main Courses</a></h3> 
<div> 
<ul> 
<li>Scottish Salmon</1i> 
<li>Vegetable Lasagna</1li> 
<li>Beef and Kidney Pie</1i> 
<li>Roast Chicken</1i> 
</ul> 
</div> 
<h3><a href="#">Desserts</a></h3> 
<div> 
<ul> 
<li>Chocolate Sundae</1li> 
<li>Lemon Sorbet</1i> 
<li>Fresh Fruit Salad</li> 
<li>Strawberry Cheesecake</1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


:</h3> 











图 21.5 展 示 了 折 车 控件 的 工作 情况 。 它 不 允许 多 个 内 容 窗 格 同时 显 
示 ， 比 如 点 击 “Starters” 标 题 会 打开 这 个 区 域 ， 同 时 也 会 关闭 刚才 处 于 打 
状态 的 区 域 。 
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Choose from the following menu options: 





» Starters N 








~ Main Courses 


Scottish Salmon 
Vegetable Lasagne 
Beef and Kidney Pie 
Roast Chicken 











» Desserts 
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21.5 HIE 





21.4.2 日 期 拾取 器 


于 日 常 使 用 的 日 期 格式 比较 多 ， 让 用 户 以 正确 格式 在 字段 里 填写 
期 一 直 是 件 烦人 的 事情 。 


日 期 拾取 器 是 一 种 弹出 式 日 历 ， 用 户 只 需要 点 击 相应 的 日 期 ， 控 件 
就 会 以 设置 好 的 格式 把 日 期 填写 到 相应 的 字段 里 。 


腿 设 下 面 这 个 字段 是 要 输入 日 期 的 ; 
<input type="text" id="datepicker"> 
只 需 一 行 代码 就 可 以 给 这 个 字段 添加 日 期 拾取 器 : 
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$( "#datepicker" ).datepicker(); 
程序 清单 21.5 列 出 了 一 个 完整 的 范例 。 























程序 清单 21.5 ”使 用 日 期 拾取 器 








<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
=href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/ 
=» jquery-ui.css"/> 
<title>Date Picker</title> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/ 
= jquery-ui.min.js"></script> 
<script> 
$(function() { 
$( "#datepicker" ).datepicker(); 
H; 


</script> 
</head> 
<body> 
Date: <input type="text" id="datepicker"> 
</body> 
</html> 


图 21.6 展 示 了 上 述 代码 的 运行 结果 。 
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21.6 日 期 拾取 器 
21.4.3 ”选项 卡 








前 面 介绍 的 可 折 车 控件 可 以 在 一 组 窗 格 中 只 显示 其 中 一 个 的 内 容 ， 
从 而 节省 一 定 的 页 面 空间 
























































要 达到 这 种 节省 空间 的 目的 ， 还 有 另 一 种 方法 ， 就 是 使 用 选项 卡 界 
。 同 样 地 ，jQuery i 岗 这 种 方式 变 得 非常 容易 。 


























程序 清单 21.6 ”选项 卡 界面 





<!DOCTYPE html> 
<html> 
<head> 

<link rel="stylesheet" type="text/css" 
=href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/ 
=» jquery-ui.css"/> 

<title>Tabs</title> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 


<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/ 
= jquery-ui.min.js"></script> 
<script> 
$(function() { 
$( "#tabs" ).tabs(); 











}); 
</script> 
</head> 
<body> 
<div id="tabs"> 
<ul> 
<li><a href="#tabs-1">Home</a></1li> 
<li><a href="#tabs-2">About Us</a></li> 
<li><a href="#tabs -3">Products</a></1i> 
</ul> 
<div id="tabs-1"> 
<p>Welcome to our online store....</p> 
</div> 
<div id="tabs-2"> 
<p>We've been selling widgets for 5 years ...</p> 
</div> 
<div id="tabs-3"> 
<p>We sell all kinds of widgets ...</p> 
</div> 
</div> 
</body> 
</html> 
选项 卡 位 于 一 个 无 序列 表 内 : 
<ul> 
<li><a href="#tabs-1">Home</a></1li> 
</ul> 














Si 
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每 个 选项 卡 的 标题 位 于 一 个 锚 点 元 素 里 ， 其 href 指 向 包含 窗 格 内 容 
的 <div>: 














<div id="tabs-1"> 
<p>Welcome to our online store....</p> 
</div> 


上 面 这 些 内 容 都 位 于 一 个 div 容 器 里 ， 其 id 为 tbs。 为 了 激活 这 个 选 
项 卡 界面 ， 我 们 要 做 的 就 是 对 这 个 容器 元 素 调用 tabs() 方 法 : 


$( "#tabs" ).tabs(); 


当选 项 卡 激活 时 ， 界 面 效果 如 图 21.7 所 示 。 
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We've been selling widgets for 5 years ... 

















21.7 选项 卡 界 面 





21.5 ”小结 





本 章 介 绍 了 如 何 利 
































用 jQuery UI 配 合 jQuery 建 立 灵活 的 用 户 界 面 ， 
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加 交互 和 微 件 是 多 么 地 轻松 。 





元 素 的 整体 风格 ， 可 以 看 到 给 页 面 添 














21.6 ”问答 


而 元素 进一步 定制 吗 ? 















































默认 设 z , 而 




















门 实际 上 有 大 量 的 定制 选项 ， 可 以 根据 我 们 的 需 











fF 
答 : 能 。 由 于 篇 幅 有 限 ， 本 书 介 绍 的 界面 和 微 件 都 使 用 了 它 介 
Č 



































WE. http://docs.jquery.com/UT/ #etk SK 
H: 如 何 让 页 面 上 的 其 他 元 素 与 jQuery UI 生 成 的 元 素 具 有 同样 的 




















样式 ? 














当 jQuery UI 生 成 装饰 效果 时 ， 








的 文档 和 范例 。 

































































, 它 会 把 很 多 的 关 应 用 二 新 创建 




















BE, 
的 元 素 。 这 些 类 对 应 于 jQuery UI CSSHE 
细 说 明 请 见 jQuery UI 文档 。 
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的 详 








有 的 CSS 声 明 。 每 个 微 付 
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21.7 作业 
请 先 回答 问题 ， 再 参考 后 面 的 答案 。 




















21.7.1 测验 
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1. 为 了 在 页 面 里 使 用 jQuery UI， 每 个 页 面 必须 至 少 包 含 : 

















a. jQuery 和 jQuery UI 库 ， 以 及 指向 jQuery UI 主题 CSS 文 件 的 链 
接 





b. jQuery 和 jQuery UI 库 











c. jQuery UI 库 和 指向 jQuery UIE CSS EAI BEF 

















2. 如 何 让 id=”parking” 的 div 元 素 能 够 容纳 拖 放 到 其 区 域 的 元 素 ? 





a. $("#parking").drop() 

b. $("#parking").dropzone() 

c. $("#parking").droppable() 
3. TAIF AEI: 








p 


a. 一 次 显示 一 个 内 容 区 域 


b. 同时 显示 指定 数量 的 内 容 区 域 




















J p 


c. 同时 显示 全 部 内 容 区 域 
21.7.2 ”答案 
Te Was 
2. ico 
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3. 选 a。 可 折 和 县 控件 一 次 


21.8 ”练习 








使 用 ThemeRoller 下 载 一 个 jQuery UI 主题 ， 用 它 来 修改 本 章 的 一 











范例 ， 比 较 一 下 前 后 不 同 的 显示 效果 。 





访问 http:/docs.jquery.comy/UI 来 查看 jQuery UI 文档 ， 了 解 如 何 进 
步 定 制 这 些微 件 ，3 
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利用 本 童 的 


(a fall dt 


行 一 些 尝试 。 


第 六 部 分 “JavaScript 与 其 他 Web 
技术 的 配合 


A 


第 22 章 ”JavaScript 与 多 媒体 


和 


第 23 章 HTML5 与 JavaScript 








第 24 章 ”Web 页 面 之 外 的 JavaScript 


22% ”JavaScript 与 多 媒体 


本 章 主 要 内 容 包括 ， 


关于 多 媒体 文件 格式 
浏览 器 插件 是 如 何 使 用 的 
如 何 使 用 <embed> 和 <object> 

用 JavaScript 控 制 Flash 影 片 回放 


“多 媒体 ”这 个 术语 几乎 可 以 涵盖 关于 音频 与 视频 效果 的 任何 内 容 ， 
包括 图 像 、 音 乐 、 音 效 、 语 音 、 视 频 片 段 、 影 片 和 动画 。 几 乎 全 部 现代 
浏览 器 都 支持 多 种 多 媒体 格式 。 

本 章 将 介绍 一 些 不 同类 型 的 多 媒体 文件 ， 以 及 如 何 使 用 JavaScript 操 
作 它 们 。 
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22.1 多 媒体 格式 





多 媒体 内 容 保存 在 媒体 文件 号 
后 级 ， 我 们 











ye oe 

















型 及 其 文件 后 缀 。 
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22.1.1 音频 格式 









































声音 文件 是 通过 对 声波 采样 而 





样 率 ) 越 高 、 采 样 


高 ， 而 文件 也 越 大 。 为 了 减 小 文件 





的 精 











且 ， 像 其 他 很 多 文件 一 样 ， 根 据 文 伯 


F 





的 





够 判断 相应 的 格式 。 下 面 的 小 节 将 介绍 常见 的 媒体 类 


得 到 的 。 一 般 来 说 ， 采 样 的 频率 〈 采 








度 越 高 (以 “比特 ” 数 衡量 ) ， 得 到 的 音频 质量 越 









































了 压缩 技术 ， 但 这 通常 








常见 的 音频 格式 如 表 22.1 所 示 。 











会 影响 音频 























质量 。 








尺寸 和 带宽 占用 ， 很 多 文件 格式 采用 


在 这 个 列表 中 ， WAV 是 最 常用 的 
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音频 格式 ， 得 到 了 所 有 浏览 器 的 支持 。MP3 格 式 是 目前 最 流行 的 音 
I 语音 压缩 格式 。“MP3” 这 个 术语 已 经 几乎 与 数字 音频 等 同 了 。 
表 22.1 常见 音频 文件 格式 
格式 描述 





Wave (.wav) 








Wave〔 波 形 ) 格式 是 由 IBM 和 微软 开发 的 。 


Windows 的 计算 机 入 











全 部 浏览 器 都 支持 这 个 格式 


所 有 运行 





WMA (.wma) 


WMA (Windows 媒 体 音 频 〉 能 够 以 连续 数据 流 的 方式 进行 


传输 ， 所 以 适合 用 于 流 媒 体 应 用 ， 比 如 互联 



































网 广播 





RealAudio (.rm, 


am) 


RealAudio% xt 


PU, BERI RAN FE 

















Real Media 开 发 ， 能 够 以 较 





+R 


多 的 带宽 提供 








MP3 (.mp3) 


MP3 文 件 是 MPEG 格 式 的 音频 部 分 ， 后 者 是 由 “ 
家 组 ”为 视频 开 
格式 ， 在 压缩 与 音质 方面 达到 了 一 个 很 好 的 平衡 

















动态 图 像 专 








发 的 一 种 格式 。MP3 是 一 种 


FE 常 流行 的 音频 











22.1.2 ”视频 格式 


所 有 常用 的 视频 格式 都 使 用 压缩 算法 来 减少 带宽 占用 和 文件 尺寸 。 
表 22.2 列 出 了 常见 的 格式 。 
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表 22.2 常见 视频 文件 格式 





格式 ik 














司 开 发 的 格式 。 所 有 Windows 和 全 部 常用 浏览 器 都 








微软 公 
AVI (.avi) 支持 它 


nia i> 





WMV (.wmv) 微软 开发 的 格式 




















MPEG (.mpg, .mpeg) | 互联 网 上 最 常用 的 格式 。 全 部 常用 浏览 器 都 支持 它 

















QuickTime (.mov) pee -种 常见 格式 ， 在 大 多 数 浏览 器 上 需要 安 



































RealVideo (.rm, .ram) | 只 占用 很 少 带宽 的 视频 流 格式 ， 但 影响 质 





























HMacromedia 〈 现 在 是 Adobe) 开发 的 一 种 格式 。 它 也 需 


ES GS dika 要 插件 ， 但 大 多 数 常见 浏览 器 已 经 预 装 它 的 插件 了 








遵循 H.264 视 频 压 缩 标 准 ， 是 互联 网 上 最 新 流行 的 格式 ， 得 


人 到 了 YouTube 和 其 他 一 些 网 站 的 支持 














22.1.3 浏览 器 插件 


不 同 浏览 器 采用 了 不 同方 式 支 持 音 频 和 视频 ， 有 些 可 以 直接 处 理 ， 
有 些 则 需要 被 称 为 “插件 ”的 外 部 程序 。 当 前 常见 的 浏览 器 都 有 大 量 各 种 
插件 ， 图 22.1 展 示 了 其 中 的 一 些 




























































































Firefox | sound.wav (audio/x-wav Object) 





eG Q (E File:///home/phil/SAMS/sound.w: 





00:00 D) 











图 22.1 各 种 浏览 器 插件 


使 用 最 广泛 的 一 些 是 : 

















e Macromedia 的 Shockwave 和 Flash 支 持 动画 和 视频 。 
。 苹果 公司 的 QuickTime 插 件 支 持 很 多 音频 和 视频 格式 。 
。 RealPlayer 文 持 多 种 格式 的 音频 流 和 视频 流 。 


不 同 的 浏览 器 会 使 用 不 同 的 插件 格式 ， 而 常 需要 不 同 的 版 本 。 
有些 插件 只 能 用 于 特定 的 平台 ， 比 如 Windows 或 Macintosh 。 
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22.2 ”使 用 锚 点 标签 


加 载 和 播放 多 媒体 内 容 的 最 简单 方式 可 能 


个 多 媒体 文件 ， 





比如 : 





就 是 利 











用 <a> 标 签 链接 


<a href="sound.wav'">Play Sound</a> 

















当 用 户 点 击 这 个 链接 时 ， 











浏览 器 就 会 加 载 指定 的 文件 。 
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式 不 是 浏览 器 
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或 .html 页 面 











» MASS 


Th 
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插件 列 








里 查看 为 这 种 文 








牛 格式 注册 














载 插 件 并 且 把 文 伯 
的 安全 规 


F 传 递 给 它 。 
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否则 浏览 器 会 询 
示 签 有 不 少 缺点 ; 
类 型 注册 的 插 
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AS 
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的 插件 ， 
一 个 尹 
加 载 这 个 程序 ， 
操作 。 











如 果 文 件 是 








频 或 视频 文件 ， 
如 果 找 至 
部 程序 相关 
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插件 的 操作 。 
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些 浏览 器 会 在 加 载 j 
造成 明显 的 延 时 。 























备件 之 前 下 载 整个 文件 ， 
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果 文件 比较 大 ， 
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或 选项 卡 加 
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中 ， 最 好 避免 使 
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22.3 ”使 用 <embed> 和 <object> 
浏览 器 长 期 以 来 一 直 支 持 两 个 关于 插件 的 标签 :<embed> 和 


<object>。 






































22.3.1 使 用 <embed> 

大 多 数 浏览 器 都 支持 <embed> 元 素 ， 但 它 不 是 标准 的 HTML 元 素 ， 
因此 是 “不 合法 ”的 。 它 的 使 用 很 简单 ， 特 别 是 用 于 常见 的 音频 文件 格式 
时 : 


<embed src="music.wav" autostart="true" loop="false"> 






























































上 例 使 用 了 音频 文件 music.wav， 参 数 autostart 控 制 着 文件 在 页 面 加 
载 时 是 否 自动 播放 ， 参 数 loop 控 制 文件 是 否 循环 播放 。 


<embed> 还 可 以 用 于 视频 文件 ， 只 要 浏览 器 支持 相应 的 格式 即 可 。 





















































22.3.2 ”使 用 <object> 
正如 前 文 所 述 ， 使 用 <embed> 是 一 种 老 方法 , “国际 网 络 联 
Ha” CW) 目前 推荐 使 用 <object> 元 素 。 它 属于 HTML4 规 范 。 
| a 
虽然 <object> 是 嵌入 文件 更 标准 的 方式 ， 但 目前 大 多 数 浏览 器 仍然 支持 <embed>。 
下 面 的 代码 也 是 播放 music.wav 文 件 ， 但 使 用 了 <object> 元 素 : 


<object type="audio/x-wav" data="music.wav" width="200" height="75"> 
<param name="src" value="music.wav"> 
<param name="autostart" value="true"> 

</object> 































































































在 HIML5 里 有 了 新 的 <audio> 和 <video> 标 签 ， 其 作用 是 在 HTML 页 面 里 嵌入 多 媒体 元 素 。 
下 一 章 将 会 介绍 HTML5。 

















22.3.3 ” JavaScript 和 插件 
大 多 数 插件 都 支持 JavaScript 编 程 。 
通常 情况 下 ， 我 们 给 <embed> 或 <object> 元 素 指定 id 属性 ， 就 可 以 利 





















































































































































用 像 getElementById0 这 样 的 DOM 方 法 获得 租 入 元 素 对 应 的 对 象 ， 然 后 
对 它 应 用 一 些 方法 。 

能 够 使 用 的 方法 取决 于 文件 类 型 和 插件 本 身 。 大 多 数 音频 插件 支持 
payor 面 的 范例 是 找到 id 属性 为 sound1l 的 嵌入 音频 文件 ， 播 
放 音 频 


document.getElementById("soundi").Play(); 


插件 的 方法 并 不 属于 标准 的 DOM， 所 以 要 参考 插件 的 文档 来 了 角 
能 够 使 用 哪些 方法 。 


22.3.4 插件 功能 检测 


在 使 用 插件 时 ， 要 谨 记 不 是 所 有 浏览 器 都 安装 了 所 需 的 插件 ， 我 们 
要 利用 功能 检测 来 确保 使 用 已 经 安装 的 插件 。 举 例 来 说 ， 应 该 像 下 面 这 
样 检测 play() 方 法 ， 
var myObj = document.getElementBylId("sound1"); 
if (myObj.Play) { 

myObj .Play(); 
} else { 
alert( "Play method is not supported."); 
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22.4 Flash 


Adobe 公 司 〈 之 前 是 Macromedia) 的 Flash 是 一 种 给 HTML 页 面 添加 
动画 、 视 频 和 交互 性 的 工具 。 它 不 仅 利 用 矢量 或 点 阵 图 形 提供 文本 、 图 
乡 和 照片 的 动画 ， 还 支持 音频 流 和 视频 流 ， 以 及 鼠标 、 键 盘 、 麦 克 风 或 
相机 的 输入 。 


Flash 文 件 通常 使 用 .swf 作 为 后 缀 ， 通 常 被 称 为 ShockWave Flash, BX 
简称 为 Flash 影 片 。Flash 视 频 的 文件 后 级 是 .flv。 它 可 以 用 于 .swf 文 件 内 
部 ， 也 可 以 通过 媒体 播放 器 播放 ， 比 如 QuickTime 或 安装 了 codecs 〈 编 
解码 器 ) 的 Windows Media Player。 


与 其 他 视频 格式 相 比 ，Flash 文 件 通常 更 小 一 些 。 

过 调用 肉 入 式 Flash 影 片 对 象 的 方法 ，JavaScript 能 够 给 Flash 发 送 
命令 ， 其 形式 就 像 调用 其 他 JavaScript 对 象 的 方法 一 样 。JavaScript 方 法 
需要 影片 本 身 增 加 什么 特殊 的 代码 就 能 够 控制 它 。 

表 22.3 列 出 了 常用 的 方法 。 


表 22.3 一 些 Flash 方 法 






























































































































































































































































方法 描述 
Play() 播放 影片 
StopPlay() 停止 播放 影片 
IsPlaying() 判断 影片 是 否 处 于 播放 状态 
GotoFrame(x) 跳 到 第 x Wis x 是 个 整数 
TotalFrames() 统计 影片 中 总 的 帧 数 














Rewind() 跳 到 第 1 帧 ， 并 且 停止 播放 





缩放 视窗 。 其 参数 与 习惯 思维 有 点 相反 : 
Zoom(50) 相 当 于 Ms 

Zoom(200) 相 当 于 二 分 之 一 尺寸 ; 
Zoom(0) 相 当 于 原始 尺寸 











Zoom(percent) 




















PercentLoaded() 检查 影片 下 载 的 百分比 ， 返 回 值 在 0 到 100 之 间 


























实践 


利用 JavaScript 控 制 Flash 影 片 











现在 来 编写 一 段 代 码 ， 用 JavaScript 控 制 Flash 影 片 的 播放 。 


首先 需要 确定 影片 文件 存在 并 且 已 经 从 服务 器 完全 加 载 了 ， 为 此 要 使 用 表 22.3 里 列 出 
的 PercentLoaded() 方 法 。 


function flashLoaded(theMovie) { 
if (typeof(theMovie) != "“undefined") { 
return theMovie.PercentLoaded() == 
} else { 
return false; 















































100; 



































在 调用 任何 方法 之 前 ， 使 用 flashLoaded() 方 法 来 查看 影片 的 加 载 情况 ， 如 下 所 示 : 





function play() { 
if (flashLoaded(movie)) { 
… 进 行 操作 … 














这 个 范例 需要 一 个 Flash 影 片 文件 ， 可 以 到 http://wonderful.net/ 在 线 创建 一 个 


接 下 来 需要 创建 函数 来 包装 Flash 影片 的 Play0、StopPlay0 和 Rewind() 方 法 。 





在 处 理 Play0 和 StopPlay(0 时 ， 还 需要 检查 影片 是 否 处 于 播放 状态 : 


function play(){ 
if (flashLoaded (document.getDocumentByIdgetElementById('demo')) && 
!document.getElementById(‘'demo') .IsPlaying()){ 
document.getElementById('demo').Play(); 





} 
} 
function stop(){ 
if (flashLoaded (document.getDocumentByIdgetElementBylId('demo')) && 
document .getElementById('demo').IsPlaying()){ 
document.getElementById('demo').StopPlay() ; 














在 处 理 Rewind() 方 法 时 ， 在 执行 回 退 操作 之 前 ， 函 数 先 使 用 stopO 函 数 停止 播放 : 
function rewind(){ 
stop(); 
if (document.getElementById('demo').Rewind()) { 
document.getElementById('demo').Rewind() ; 























完整 的 代码 如 程序 清单 22.1 所 示 。 在 运行 时 ，.swf 影 片 文件 要 与 它 位 于 同一 个 文件 























程序 清单 22.1 利用 JavaScript 控 制 Flash 影 片 














<!DOCTYPE html> 


<html> 
<head> 
<title>Using Embedded Objects</title> 
<script> 
function flashLoaded(theMovie) { 
if (typeof(theMovie) != "undefined") { 
return theMovie.PercentLoaded() == 100; 
} else { 
return false; 
} 
} 
function play(){ 
if 


wf lashLoaded(document.getDocumentByIdgetElementById('demo')) && 





!document.getElementById('demo') .IsPlaying()){ 
document.getElementById('demo').Play(); 


} 
function stop(){ 
if 


= (flashLoaded(document.getDocumentByIdgetElementById('demo')) && 
document .getElementById('demo').IsPlaying()){ 
document.getElementById('demo').StopPlay(); 


I 
J 
function rewind(){ 
stop(); 
if (document.getElementById('demo').Rewind()) { 
document .getElementById('demo').Rewind(); 
} 
} 


window.onload = function() { 
document.getElementById("play").onclick = play; 
document.getElementById("stop").onclick = stop; 
document. getElementById("rewind").onclick = rewind; 
} 
</script> 
</head> 
<body> 
<embed id="demo" name="demo" 
src="example.swf" 
width="318" height="300" play="false" loop="false" 
pluginspage="http: //www.macromedia.com/go/getflashplayer 
swliveconnect="true"> 
</embed> 
<form name="form" id="form"> 
<input id="play" type="button" value="Start" /> 
<input id="stop" type="button" value="Stop" /> 
<input id="rewind" type="button" value="Rewind" /> 
</form> 
</body> 
</html> 
































样 ) ， 查 看 一 下 三 个 按钮 是 否 按 预 期 的 工作 。 








这 个 页 面 在 浏览 器 加 载 之 后 的 情况 类 似 图 22.2 所 示 “〈 当 然 可 能 播放 的 影片 文件 不 一 | 


|} Using Embedded Objects 





© @ | Ofile:///home/phil/sams/22li¥y| +» A 








| Start | | Stop | | Rewind | 








图 22.2 使 




















JavaScript 控 制 Flash 影 片 





22.5 小结 


本 章 介 绍 了 一 些 不 同 的 多 媒体 文件 格式 ， 以 及 如 何 利 用 JavaScript 操 
作 这 些 文件 ， 给 页 面 添 加 音频 和 视频 效果 。 


下 一 章 将 介绍 使 用 HTML5 标 签 控制 多 媒体 的 最 新 方法 。 
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H: 在 页 面 里 包含 多 媒体 文件 有 什么 不 利 的 方面 


在 给 页 面 添加 多 媒体 时 ， 除 了 要 处 理 很 多 不 同 
身 通常 是 比较 大 的 ， 所 以 会 





问 : 什么 是 “ 流 ” 音 频 和 “ 流 ” 视 频 ， 
Re eee a 





常见 的 流 格式 是 什么 ? 














































































































间 和 网 络 带宽 。 








这 部 分 内 存 被 称 





分 内 容 ， 保 存 到 内 存 里 。 













































































同时 在 后 台 继 续 进 行 下 








肖 文 件 传输 带 来 的 
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类 型 的 文件 格 
消耗 很 多 存储 空 








22.7 作业 

















请 先 回答 问题 ， 再 查看 








22.7.1 测验 


后 面 的 答案 。 











1. 哪个 html 标 签 经 常 | 
a. <object> 
b. <flash> 


c. <stream> 


2. 下 面 哪个 是 浏览 器 的 多 媒体 插 


a. Acrobat Reader 
b. QuckTime 


c. Firebug 


3. 下 面 哪个 是 流 视频 格式 ? 


a. .WaV 
b. .mp3 
cC. ram 
22.7.2 ”答案 
1. ita. 
2. ib. 


3. Vico 
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找到 一 些 嵌 入 多 媒体 内 容 的 互联 网 站 点 ， 查 看 源 代码 ， TA 
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修改 程序 清 


(提示 : 














E 


属性 
可 [一 


单 22.1 的 代码 ， ee 


jZoom(percent) 





Fa 
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%23% HTML55 JavaScript 


本 章 主要 内 容 包括 : 


关于 HTML5 的 新 标签 
如 何 处 理 音 频 和 视频 
使 用 <canvas> 元 素 
HTML5 里 的 拖 放 

使 用 本 地 存储 

与 本 地 文件 系统 的 交互 


HTML 前 一 个 版 本 是 1999 年 发 布 的 4.01。 
XHTML 是 基于 XML 的 HTML。 它 是 W3C 近 年 来 不 断 努 力 的 一 个 ] 
目 ， 最 新 版 本 是 XHTML2。 但 在 2009 年 ，W3C 宣 布 放弃 XHTML， 把 全 
部 精力 投入 到 新 版 的 HTML: HTML5。 


这 个 最 新 版 本 的 HTML 致 力 于 把 HTML 作 为 Web 应 用 的 前 端 ， 使 用 
义 丰 富 的 元 素来 扩展 标签 语言 ， 引 用 新 届 性 ， 支 持 使 用 JavaScript 和 加 
的 API。 


HTML5 很 快 就 会 成 为 HTML 的 新 标准 ， 
多 HTML5 的 元 素 和 API 了 。 


本 章 将 介绍 如 何 使 用 JavaScript 来 控制 其 中 一 些 强大 的 新 功能 。 
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主流 浏览 器 已 经 支持 很 


















































提示 : 


注意 这 个 新 版 本 的 书写 方式 ，HTML5， 在 L 与 5 之 间 是 没有 空格 的 。 





23.1 HTML5 的 新 标签 


即使 是 组 织 良 好 的 HTML 页 面 ， 对 其 代码 的 阅读 与 解释 都 会 比 想像 
中 困难 的 多 ， 主 要 原因 是 标签 本 身 包 含 的 语义 信息 很 少 。 


像 边 栏 、 标 题 和 页 脚 、 导 航 元 素 这 些 页 面 组 成 部 分 都 被 包含 在 像 
div 这 样 的 通用 元 素 里 ， 只 能 根据 开发 人 员 设 置 的 id 和 类 名 加 以 区 分 。 


HTML5 添 加 的 新 元 素 更 容易 识别 ， 也 更 明确 其 中 的 内 容 。 表 23.1 列 
出 了 一 些 新 标签 。 





































































































表 23.1 一 些 HTML5 新 标签 












































标签 HR 
<section> 定义 页 面 的 区 域 
<header> 页 面 标题 
<footer> 页 面 页 脚 
<nav> 页 面 导 航 元 素 
<article> 页 面 的 文章 或 主要 内 容 
<aside> 页 面 的 附加 内 容 ， 比 如 边栏 
<figure> 文章 的 配 图 
<figcaption> <figure> 元 素 的 标题 
<summary> <details> 元 素 的 可 视 标题 

































































































































































23.2 一 些 重要 的 新 元 素 

HTML53 引 入 了 很 多 有 趣 的 新 功能 ， 本 节 先 着 重 介绍 解决 了 一 些 老 
麻烦 的 新 标签 。 
23.2.1 使 用 <video> 回 放 视 频 

视频 在 Web 上 是 很 流行 的 ， 但 从 前 一 章 的 介绍 我 们 可 以 知道 ， 实 现 
视频 的 方法 是 多 种 多 样 的 ， 视 频 的 回放 是 通过 使 用 插件 实现 的 ， 比 如 
Flash. Windows Media 或 苹果 的 QuickTime。 能 够 在 一 个 浏览 器 里 嵌入 
这 些 元 素 的 标签 在 另 一 个 浏览 器 里 不 一 定 能 够 正常 使 用 。 

HITML5 提 供 了 一 个 崭新 的 <video> 元 素 ， 其 目标 是 嵌入 任何 一 种 视 


比如 实现 QuickTime 视 频 的 方法 是 这 样 的 ; 


<video src="video.mov" 
MIZ LERTA LAR TR CS PRBS) 还 

















到 
Us 


前 为 止 ，<video> 元 素 


/> 











;不 大 


之 中 ， 还 在 继续 : 
www.webmproject. 


j 多 个 格式 ， 
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还 不 必 使 
的 视频 格式 有 3 种 : MP4、WebM 和 Ogg。 





寻找 不 需要 专门 询 


F 可 的 编 解码 器 ， 但 





org ) 似乎 不 错 。 
用 浏览 器 所 需 








目前 ， 解 决 这 个 问题 的 方 
要 的 功能 嗅 探 。 当 前 获得 广 





<video id="vid1" width="400" height="300" controls="controls"> 
<source src="movie.mp4" type="video/mp4" /> 
<source src="movie.ogg" type="video/ogg" /> 
<source src="movie.webm" type="video/webm" /> 
<p>Video tag not supported.</p> 


</video> 





给 <video> 元 素 指 定 宽 


道 应 该 保留 多 大 面积 的 区 域 ， 导 致 视频 加 载 时 





我 们 还 





度 和 高 


建议 在 <video> 和 </video> 之 间 设 置 一 些 文本 ， 用 卫 


度 是 个 很 好 的 习惯 ， 
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<video> 标 签 的 浏览 器 里 显示 。 








表 23.2 列 出 了 <video> 标 签 一 些 重要 的 属性 。 














表 23.2 ”<video> 标 签 的 一 些 属性 

































































属性 描述 
loop 循环 播放 
autoplay 视频 加 载 后 自动 播放 
controls 显示 回放 控件 (其 外 观 取决 于 浏览 器 ) 
ended 司 放 结束 时 ， 值 为 tue CAE) 
paused 可 放 暂 停 时 ， 值 为 tue (只 读 ) 
poster 设置 影片 加 载 时 显示 的 图 像 
volume 音量 ， 值 是 从 0 (静音 ) 到 1 (最 大 ) 。 
































利用 controls 属 性 显示 的 控件 外 观 依赖 于 所 使 用 的 浏览 器 ， 如 图 23.1 




















0:02/0:32 中 Opera 





p I 00:04 4) Chrome 





图 23.1 不 同 浏览 器 上 回放 控件 的 不 同 外 观 


操作 这 些 属性 的 方式 与 对 待 其 他 JavaScript 或 DOM 对 象 是 一 样 的 ， 
比如 对 于 前 面 的 <video> 元 素 : 


var myVideo = document.getElementById("vidi").volume += 0.1; 

就 可 以 稍微 提高 音量 。 

if (document.getElementById("vidi").paused) { 
alert(message) ; 

































































上 面 的 代码 可 以 在 视频 回放 和 暂停 时 癌 用 户 显示 提示 消息 。 
23.2.2 ”利用 canPlayType0 测 试 可 用 的 格式 


利用 JavaScript 的 media.canPlayType(type) 方 法 可 以 检查 对 特定 编 解 
码 器 的 支持 ， 其 中 type 是 表示 媒体 类 型 的 字符 串 ， 比 如 “video/webm”。 
如 果 浏 览 器 确定 支持 指定 内 容 ， 这 个 方法 会 返回 一 个 空 字符 串 。 如 果 浏 
览 器 认为 它 支持 指定 格式 ， 方 法 会 返回 “probably”， 其 他 情况 就 返 
回 “maybe”。 


























































































































23.2.3 ”控制 回放 




















利用 pauseO 和 play0 命 令 也 可 以 控制 视频 回放 ， 像 下 面 这 样 


var myVideo = document.getElementById("vid1").play(); 
var myVideo = document.getElementById("vidi").pause(); 

















23.2.4 用 <audio> 标 签 播放 声音 


<audio> 元 素 与 <video> 很 相似 ， 只 不 过 它 专门 用 于 处 理 音 频 文 件 。 
使 用 <audio> 元 素 最 简单 的 方法 是 : 


<audio src="song.mp3"></audio> 
还 可 以 对 回放 进行 更 多 的 控制 ， 比 如 loop 和 autoplay: 
<audio src="song .mp3" autoplay loop></audio> 
eas: | 
千 万 不 要 混淆 oop 和 autoplay， 和 否则 可 能 严重 影响 用 户 体验 而 影响 网 站 的 访问 量 。 


像 前 面 处 理 视频 文件 一 样 ， 我 们 可 以 包含 多 个 不 同 的 格式 ， 以 确保 
浏览 器 可 以 找到 自己 能 播放 的 ， 比 如 下 面 的 代码 : 
<audio controls="controls"> 

<source src="song.ogg" type="audio/ogg" /> 

<source src="song.mp3" type="audio/mpeg" /> 

Your browser does not support the audio element. 
</audio> 

<audio> 元 素 支 持 的 最 常见 文件 格式 是 MP3、WAV 和 Ogg。 在 
JavaScript 里 控制 音频 的 方式 与 视频 差不多 。 


利用 JavaScript 添 加 和 播放 音频 文件 时 ， 只 需 把 它 当 作 其 中 
JavaScript 或 DOM 对 象 即 可 : 

































































































































































var soundElement = document.createElement('audio'); 
soundElement.setAttribute('src', sound.ogg'); 
soundElement.play(); 

soundElement.pause(); 


<audio> 和 <video> 标 签 有 很 多 有 用 的 属性 可 以 通过 JavaScript 进 行 控 
制 。 下 面 列 出 了 常用 的 一 些 ， 它 们 作用 的 效果 是 立即 呈现 的 : 


mediaElement.duration 
mediaElement.currentTime 
mediaElement.playbackRate 


mediaElement.muted 


关于 这 些 标 签 及 其 属性 和 方法 的 详细 介绍 ， 请 见 www.whatwg.org/specs/web-apps/ current- 
work/multipage/the-video-element.html 。 


举例 来 说 ， 要 想 跳 转 到 某 首 歌 的 第 45 秒 ， 可 以 这 样 : 
soundElement.currentTime = 45; 
23.3.5 “利用 <canvas> 在 页 面 上 绘 

<canvas> 标 签 能 够 提供 的 是 页 面 上 的 一 个 矩形 区 域 ， 我 们 可 以 利用 
JavaScript 在 其 中 绘制 图 形 与 图 像 ， 也 可 以 加 载 和 展现 图 像 文件 并 控制 其 


显示 方式 。 这 个 元 素 页 域 ， 比 如 动态 图 表 、 
JavaScriptHTML 游 戏 和 受 控 动 


































































































































































































<canvas> 元 素 只 是 通过 它 的 width 和 height 参 数 定 义 一 个 区 域 ， 其 他 
与 创建 图 形 内 容 相关 的 事情 都 是 通过 JavaScript 实 现 的 。Canvas 2D API 
就 是 绘画 方法 的 一 个 大 集 


















































实践 
使 用 <canvas> 实 现 一 个 移动 的 圆 球 


现在 利用 <canvas> 实 现 一 个 简单 的 动画 ， 就 是 一 个 红色 圆 盘 《代表 一 个 球 ) 在 页 面 上 
以 圆 形 轨迹 运动 。 


页 面 <body> 部 分 里 只 需要 一 个 <canvas> 即 可 : 


<canvas id="canvasi" width="400" height="300"></canvas> 
























































如 果 不 设置 width 和 height 参 数 ， 默 认 尺 寸 是 300 像 素 宽 ，150 像 素 高 。 
所 有 的 绘图 和 动画 工作 都 是 由 JavaScript 完 成 的 。 


首先 需要 指定 “ 泻 染 环境 "。 在 本 书 编写 时 ，2D 是 唯一 得 到 广泛 支持 的 环境 ，3D 环 境 
还 在 开发 中 。 


context= canvasi.getContext(‘2d'); 
<canvas> 唯 一 支持 的 形状 就 是 简单 的 矩形 : 









































fillRect(x,y,width,height); // 绘 制 一 个 填充 的 矩形 
strokeRect(x,y,width,height); // 绘 制 一 个 矩形 框 
clearRect(x,y,width,height);  // 清 除 和 矩形 


























其 他 的 形状 就 需要 使 用 一 个 或 多 个 路 径 绘 制 函数 才能 实现 。 本 例 需 要 绘制 一 个 彩色 圆 
现在 就 来 绘制 。 


<canvas> 提 供 了 很 多 不 同 的 路 径 绘 制 函 数 : 


moveTo(x,y) 会 移动 到 指定 位 置 ， 不 绘制 任何 东西 。 





ad 




















lineTo(x,y) 会 从 当前 位 置 到 指定 位 置 绘制 一 条 直线 。 











arc(x,y,r,startAngle,endAngle,anti) 绘 制 弧 线 ， 圆 心 位 置 是 x,y， 半 径 是 r， 起 始 角 度 是 
startAngle， 结 束 角 度 是 endAngle。 默 认 绘 制 方向 是 顺 时 针 。 如 果 最 后 一 个 参数 是 tue， 就 
会 以 道 时 针 方向 绘制 。 


为 了 使 用 这 些 基 本 命令 来 绘制 形状 ， 还 需要 其 他 一 些 方法 : 
































object.beginpath(); 

object.closePath(); // ”完成 剩余 部 分 形状 
object. stroke(); // 绘制 轮廓 形状 
object.fil1(); // ”绘制 填充 形状 

















为 了 得 到 范例 需要 的 球体 ， 我 们 要 绘制 一 个 填充 的 圆 形 ， 颜 色 是 红色 ， 半 径 是 15， | 
+t» 50,50: 


context.beginPath(); 
context. fillStyle="#fF0000"; 
context.arc(5@, 50, 15, ©, Math.PI*2, true); 
context.closePath(); 
为 了 实现 动画 效果 ， 需 要 用 一 个 定时 器 修改 圆心 的 x y 坐标 。 | 
function animate() { 
context.clearRect(@,@, 400,300); 
counter+t+; 
x += 20 * Math.sin(counter) ; 
y += 20 * Math.cos(counter) ; 


paint(); 



































} 


setInterval() 方 法 会 重复 调用 函数 animate()。 这 个 函数 每 次 被 调用 时 ， 首 先 用 clearRect() 
方法 清除 绘制 区 域 ， 然 后 变量 counter 的 值 会 增加 ， 以 此 作为 圆 形 的 新 圆心 坐标 。 


完整 的 代码 如 程序 清单 23.1 所 示 。 

























































































程序 清单 23.1 使 用 <canvas> 实 现 一 个 移动 的 圆 球 

















<!DOCTYPE HTML> 
<html> 
<head> 
<title>HTML5 canvas</title> 
</head> 
<script> 
var context; 
var x=50; 
var y=50; 
var counter = 0; 





function paint() { 


} 


context. 
context. 
context. 


context 


context. 


beginPath(); 

fillStyle="#ff0000"; 

arc(x, y, 15, ©, Math.PI*2, false); 
.closePath(); 

fill(); 


function animate() { 


} 


context. 


clearRect(0,0, 400,300); 


counter++; 


x += 20 
y += 20 


paint(); 


* Math.sin(counter) 
* Math.cos(counter) ; 


window.onload = function() { 
context= canvas1.getContext('2d'); 
setInterval(animate, 100); 


} 


</script> 


<body> 


<canvas id="canvas1" width="400" height="300"> 


<p>Your browser doesn't support the canvas element 


</canvas> 


</body> 
</html> 


.</p> 














在 支持 <canvas> 元 素 的 浏览 器 打开 这 个 文件 ， 就 会 看 到 一 个 红色 圆 形 在 页 面 上 做 





运动 ， 如 











23.2 所 示 。 
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图 23.2 ”使 用 <canvas> 的 动画 








23.4 Hai 


拖 放 操作 是 HTML5 标 准 的 组 成 部 分 ， 几 乎 页 面 上 所 有 元 素 都 是 可 
以 拖 放 的 。 


想 让 元 素 是 可 以 拖 动 的 ， 只 需要 把 它 的 draggable 属 性 设置 为 true: 


<img draggable="true" /> 


但 是 拖 动 操作 本 身 并 没有 太 大 的 实际 意义 ， 被 拖 动 的 元 素 需 要 能 
被 放下 才 有 意义 。 


为 了 定义 元 素 能 够 被 放 到 什么 地 方 ， 并 且 控 制 拖 动 和 放下 的 过 程 ， 
我 们 需要 编写 事件 监听 器 来 检测 和 控制 拖 放 过 程 的 各 个 部 分 。 


能 够 用 于 控制 拖 放 操作 的 事件 有 : 

































































































































































dragstart 
drag 
dragenter 
dragleave 
dragover 
drop 
dragend 


为 了 控制 拖 放 操作 ， 我 们 需要 定义 源 元 素 〈 拖 放 开始 的 地 方 ) 、 数 
据 ( 拖 动 的 对 象 ) 和 放置 目标 〈 捕 获 拖 动 元 素 的 区 域 ) 。 


不 是 任何 元 素 都 能 够 作为 放置 


dataTransfer 属 性 包含 的 数据 会 在 拖 放 操作 中 进行 传递 ， 它 通常 在 
dragstart 事 件 处 理 器 里 进行 设置 ， 由 drop 事 件 处 理 器 进行 读 取 和 处 置 。 


setData(format.data) 和 getData(format,data) 分 别 用 于 这 个 属性 的 设置 
与 读 取 。 
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或 的 ， 比 如 <img> 就 不 能 接受 放置 操作 。 


















































































































































HTML5 里 的 拖 放 操 作 
现在 来 体会 一 下 HTML5 拖 放 界 面 ， 代 码 如 程序 清单 23.2 所 示 。 





程序 清单 23.2 HTML5 的 拖 放 操 作 





<!DOCTYPE HTML> 
<html> 
<head> 
<title>HTML5 Drag and Drop</title> 
<style> 
body {background-color: #ddd; font-family: arial, verdana, 
™sans-serif;} 
#drop1 {width: 20@px;height: 200px;border: 1px solid 
=black;background-color: white} 
#drag1 {width: 5Q@px;height: 50px;} 
</style> 
<script> 
function allowDrop(ev) { 
ev.preventDefault(); 


function drag(ev) { 
ev.dataTransfer.setData("Text",ev.target.id) ; 


function drop(ev) { 
var data = ev.dataTransfer.getData("Text") ; 
ev.target.appendChild(document.getElementById(data) ); 
ev.preventDefault(); 


window.onload = function() { 
var dragged = document.getElementById("dragi"); 
var drophere = document.getElementById("dropi") ; 
dragged.ondragstart = drag; 
drophere.ondragover = allowDrop; 
drophere.ondrop = drop; 
} 
</script> 
</head> 
<body> 
<div id="drop1" ></div> 
<p>Drag the image below into the box above:</p> 
<img id="dragi" src="drag.gif" draggable="true" /> 
</body> 
</html> 





为 了 达到 示范 的 目的 ， 代 码 里 先 定义 了 一 些 HTML 元 素 。id 为 drop1 的 <div> 元 素 是 捕 
获 拖 放 操作 的 放置 区 域 ， 而 id 为 drag1 的 图 像 元 素 是 要 拖 动 的 元 素 。 


代码 里 定义 了 三 个 重要 的 函数 ， 它 们 都 会 接收 到 当前 处 理 的 事件 。ev.target 在 后 台 会 
基于 拖 放 操作 的 状态 而 自动 变化 为 相应 的 事件 类 型 。 
。 函数 drag(ev) 在 拖 放 开始 时 执行 ， 它 把 dataTransfer 属 性 设置 为 拖 动 元 素 的 id: 
function drag(ev) { 
ev.dataTransfer.setData("Text",ev.target.id); 

































































} 
。 函数 allowDrop(ev) 在 拖 动 元 素 经 过 放置 区 域 时 执行 ， 它 的 作用 就 是 阻止 放置 区 域 执 
行 默认 操作 : 


function allowDrop(ev) { 
ev.preventDefault(); 

















x| 














} 


。 函数 drop(ev) 会 在 拖 动 元素 被 放下 时 执行 ， 它 会 读 取 dataTransfer 属 性 的 值 来 获得 拖 动 | 











元 素 的 id， 把 这 个 元 素 设置 为 放置 区 域 的 子 元 素 。 这 时 仍然 需要 阻止 放置 区 域 执行 


默认 操作 : 
function drop(ev) { 


var data = ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
ev.preventDefault() ; 








} 


文件 加 载 在 浏览 器 后 的 效果 类 似 于 图 23.3 所 示 ， 我 们 可 以 把 这 个 小 图 像 拖 放 到 白色 的 
放置 区 域 ， 会 看 到 它 “ 停 靠 ” 在 <dive> 元 素 上 。 




































































加 HTMLS Drag and Drop x 

















[|] HTMLS Drag and Drop x 
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Drag the image below into the box 





Drag the image below into the box above: 


图 23.3 HTML5 拖 放 操作 





23.5 ”本 地 存储 


HTML5 能 够 在 用 户 的 浏览 器 里 保存 大 量 数据 ， 同 时 不 会 对 站 点 的 
性 能 造成 任何 影响 。 与 使 用 cookies 相 比 ，Web 存 储 更 加 安全 和 快速 。 与 
cookie 相 同 的 是 ， 数 据 也 是 以 “关键 字 / 值 ”对 的 方式 存储 的 ， 而 且 Web 页 
面 只 和 能 访 问 1 存储 的 数据 。 


在 浏览 器 里 实现 本 地 数据 存储 的 两 个 新 对 象 如 下 。 


e localStorage: 存储 数据 ， 没 有 过 期 时 间 。 
e sessionStorage: 只 在 当前 会 话 中 保存 数据 。 


goo 能 确定 浏览 器 是 否 支 持 本 地 存储 ， 解 决 的 办 法 仍然 是 使 用 功 





























































































































































































































if(typeof(Storage)!="undefined") { 
… 使 用 两 个 新 对 象 进行 操作 ... 
} 












































保存 数据 的 方式 有 两 种 。 一 种 是 调用 setItem 方 法 ， 向 它 传递 一 个 关 
键 字 和 一 个 值 : 


localStorage.setItem("key", "value"); 
另 一 种 方式 是 像 操作 关联 数组 一 样 使 用 localStorage 对 象 : 

localStorage["key"] = "value"; 
获取 数据 时 也 可 以 使 用 以 下 两 种 方式 之 一 : 

alert(localStorage.getItem("key")); 
或 





















































alert(localStorage["key"]); 


23.6 ”操作 本 地 文件 



































HTML5 的 文件 API 规 范 让 我 们 终于 可 以 利用 HTML 来 访问 用 户 的 本 
地 文件 了 ， 具 体 途 径 有 多 个 。 
。 File: 提供 的 信息 包括 名 称 、 大 小 和 MIME 类 型 ， 以 及 对 文件 句柄 














的 引用 。 
e FileList: 类 似 数组 的 File 对 象 列表 。 
e FileReader: 使 用 File 和 FileList 异 步 读 取 文 件 的 接口 。 我 们 可 以 查看 
读 取 进 程 、 捕 获 错误 、 判 断 文件 何 时 加 载 完 成 。 


查看 浏览 器 的 支持 情况 
利用 功能 检测 可 以 查看 浏览 器 是 否 支 持 文件 API: 

















































































































if (window.File && window.FileReader && window.FileList) { 
// 进 行 操作 
} 
实践 
与 本 地 文件 系统 交互 


我 们 将 修改 前 一 个 拖 放 操作 的 范例 ， 实 现 多 个 本 地 文件 拖 放 到 Web 页 面 的 操作 ， 方 法 
是 使 用 FileList 数 据 结构 。 
修改 后 的 drop(ev) 函 数 是 这 样 的 : 
function drop(ev) { 
var files = ev.dataTransfer.files; 
for (var i = 0; i < files.length; i++) { 
var f = files[i]; 
var pnode = document.createElement("p"); 























var tnode = document.createTextNode(f.name + " ("+ 
=»f.type + ") "+ f.size + " bytes"); 
pnode.appendChild(tnode) ; 
ev.target.appendChild(pnode) ; 
} 


ev.preventDefault(); 


} 
在 这 里 ， 程 序 从 dataTransfer 对 象 提取 了 FileList， 它 包含 了 拖 放 文件 的 信息 : 


var files = ev.dataTransfer.files; 
然后 依次 处 理 每 个 文件 : 








for (vari=0; i<files.length; i++) { 
var f=files[i]; 
-对 每 个 文件 进行 操作 … 

t 











完整 的 代码 如 程序 清单 23.3 所 示 。 





程序 清单 23.3 与 本 地 文件 系统 交互 








<!DOCTYPE HTML> 
<html> 
<head> 
<title>HTML5 Local Files</title> 
<style> 
body {background-color: #ddd; font-family: arial, verdana, 
sans-serif ;} 
#drop1 { 
width: 400px; 
height: 200px; 
border: 1px solid black; 
background-color: white; 
padding: 10px; 
} 
</style> 
<script> 
function allowDrop(ev) { 
ev.preventDefault(); 


function drop(ev) { 

var files = ev.dataTransfer.files; 

for (var i = 0; i < files.length; i++) { 
var f = files[i] 
var pnode = document.createElement("p"); 
var tnode = document.createTextNode(f.name + " ("+ 

=»f.type + ") "+ f.size + " bytes"); 

pnode.appendChild(tnode) ; 





ev.target.appendChild(pnode) ; 
} 


ev.preventDefault() ; 


window.onload = function() { 
var drophere = document.getElementById("drop1") ; 
drophere.ondragover = allowDrop; 
drophere.ondrop = drop; 
} 
</script> 
</head> 
<body> 
<div id="drop1" ></div> 
<output id="text"></output> 
</body> 
</html> 


在 浏览 器 里 加 载 这 个 页 面 ， 我 们 可 以 从 本 地 文件 系统 向 页 面 的 放置 区 域 拖 放 文件 ， 然 
后 就 能 看 到 文件 名 称 、MIME 类 型 和 大 小 信息 ， 如 图 23.4 所 示 。 
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test html (text/html) 1000 bytes 

23fig01 png (image/png) 43951 bytes 
drag gif (image/gif) 1727 bytes 

22fig01 png (image/png) 123443 bytes 























[©] 22listingor html 
E 22figot-png 


EREA 


图 23.4 与 本 地 文件 系统 交互 


























23.7 小结 


HTML5 为 HTML 提 供 了 一 系列 新 功能 ， 让 这 种 标签 语言 更 好 地 完成 
Web 应 用 的 基础 工作 ， 也 让 JavaScript 能 够 使 用 一 些 红 新 的 API。 


本 章 简要 介绍 了 一 些 新 功能 ， 也 展现 了 使 用 这 些 新 API 的 实用 代 
15. 




























































































23.8 ”问答 


















































H: 学 习 HTML5 的 最 佳 途径 是 什么 ? 
答 : 学 习 HTML5 的 最 佳 途径 是 使 用 它 。 利 用 HTML5 的 特性 建立 页 
而 ， 比 如 使 用 语义 明确 的 标签 ， 尝 试 音频 和 视频 回放 ， 尝试 拖 放 操 作 ， 


























Ey 





区 用 本 地 存储 ， 使 用 文件 API， 使 用 <canvas> 建 立 动画 。 如 果 遇 到 |P 
， 互 联网 上 有 很 多 教程 、 博 客 和 范例 代码 都 可 以 提供 帮助 。 






















































































H: 己 经 有 使 用 HTML5 的 实用 站 点 了 吗 ? 














Z: 当然 ， 有 很 多 。 详 情 请 见 http://html5gallery.com/ o 

















23.9 ”作业 


请 先 回答 问题 ， 再 查看 后 面 的 答案 。 























23.9.1 测验 


1. 下 面 哪个 标签 不 是 HTML5 语 义 化 元 素 ? 





a. <header> 
b. <sidebar> 
c. <nav> 
2. 下 面 哪个 方法 不 属于 <audio> 和 <video> 元 素 ? 
a. play() 
b. pause() 
c. stop() 
3. 下 面 哪个 不 属于 标准 的 拖 放 事 件 ? 


























a. drag 

b. dragover 

c. dragout 
23.9.2 BR 


1. 选 b。<sidebar> 不 是 有 效 的 HTML5 元 素 。 











2. 选 c。 没 有 stop() 方 法 。 
3. 选 c。 没 有 dragout 事 件 ， 应 该 是 dragleave 事 件 。 

















23.10 ”练习 





— 





尝试 把 前 面 章节 的 范例 用 HTML5 重 写 。 





























HTML5 目 前 还 是 相当 新 潮 的 东 



































aq 


， 如 果 想 了 解 浏览 器 对 了 


FHTML5 








各 种 特性 的 支持 情况 ， 可 以 查看 http://caniuse.com/ 


或 http://html5readiness.com/ 。 


第 24 章 ”Web 页 面 之 外 的 
JavaScript 


本 章 主要 内 容 包 括 : 


。 Web 页 面 之 外 的 JavaScript 应 用 程序 实例 
。 如 何 给 Google Chrome 编 写 浏览 器 扩展 


















































到 目前 为 止 ， 我 们 已 经 介绍 了 很 多 关于 JavaScript 在 Web 页 面 里 的 操 
{F 但 JavaScript 不 是 只 能 于 Web 页 面 ， 还 可 以 建立 和 扩展 来 增强 浏览 
器 的 功能 。 而 且 除了 浏览 器 之 外 ， 很 多 工具 软件 也 都 内 置 了 JavaScript 解 
释 程序 ， 它们 通常 提供 自己 的 对 象 模 型 来 模拟 主机 环境 ， 但 核心 
JavaScript 语 言 在 大 多 数 情况 下 都 能 保持 基本 相同 的 效果 。 
















































































































































































本 章 将 介绍 JavaScript 如 何在 web 页 面 之 外 发 挥 作 用 ， 并 将 给 Google 
Chrome 浏 览 器 编写 一 个 扩展 程序 。 




















24.1 浏览 器 之 外 的 JavaScript 


除 在 Web 页 面 外 ，JavaScript 还 可 以 用 于 很 多 场合 来 实现 应 用 程序 : 












































e 为 Google Chrome、Opera 和 Apple Safari 5 浏览 器 编写 扩展 ， 给 Apple 
Dashboard、 微 软 、Yahoo! 和 Google Desktop 编 写 微 伯 

e Adobe Acrobat 和 Adobe Reader 的 PDF 文件 ， 以 及 很 多 第 三 方 应 用 程 
序 都 支持 JavaScript。 

e Adobe 的 Photoshop、llustrator、Dreamweaver 和 其 他 很 多 程序 都 支 

持 JavaScript 编 写 脚 本 。 

。 OpenOffice.org 的 办 公 软件 套 装 〈( 及 其 同族 LibreOffice) he 
作为 宏 脚 本 语言 之 一 。 这 些 软件 主要 是 用 Java 开 发 的 ， 并 且 者 
Mozilla Rhino 提 供 了 JavaScript 实 现 。JavaScript 宏 次 言 能 够 访问 应 | | 
程序 的 变量 和 对 象 ， 很 像 Web 浏 览 器 脚本 访问 页 面 的 DOM。 

。 Sphere 是 一 种 编写 角色 扮演 游戏 的 开源 、 跨 平台 台 程序， Unity 游 戏 引 
擎 支持 使 用 JavaScript 脚 本 。 

e Google Apps Script 允 许 F 用 户 利用 JavaScript 访 问 和 控制 Google 
Spreadsheets 和 其 他 产品 。 

。 ActionScript 是 Adobe Flash 使 用 的 一 种 编程 语言 ， 它 是 ECMAScript 

标准 的 另 一 种 实现 。 

e Mozilla 平 台 是 Firefox、Thunderbird 和 其 他 一 些 项 目的 基础 ， 使 

JavaScript 编 写 这 些 程序 的 图 形 化 用 户 界 面 。 


在 本 书 的 这 最 后 我 们 将 实际 尝试 其 中 一 种 应 用 : 给 Google 
Chrome 浏 览 器 编 号 二 不 扩展 ， 
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24.2 ”编写 Google Chrome 扩 展 


扩展 是 在 Web 浏 览 器 内 部 运行 的 一 种 小 程序 ， 提 供 额外 的 服务 ， 比 
如 集成 第 三 方 站 点 或 数据 源 、 定 制 用 户 浏览 器 的 体验 。Google Chrome 
扩展 就 是 一 些 文件 集合 ， 包 括 HTML、CSS、JavaScript、 图 像 等 ， 打 包 
为 一 个 zip 文 件 〈 尽 管 其 文件 后 绥 是 .crx) 。 





























































































































P 程序 的 基本 功能 就 是 创建 一 个 Web 页 面 。 能 够 使 用 浏览 器 给 普 
通 Web 页 面 提 供 的 全 部 界面 元 素 ， 包 括 JavaScript 库 、CSS 样 式 表 、 
XMLHttpRequest 对 象 等 。 










































































扩展 程 序 能 够 与 Web 页 面 或 服务 器 进行 交互 ， 还 可 以 通过 代码 与 浏 
览 器 功能 (比如 标签 和 选项 卡 〉 进 行 交互 。 


24.2.1 建立 简单 的 扩展 程 请 







































































第 一 个 步骤 是 在 计算 机 上 建立 一 个 文件 夹 ， 用 于 保存 扩展 程序 的 代 

















150 









































每 个 扩展 程序 都 有 一 个 清单 文件 : manifest.json。 它 使 用 JSON 格 
式 ， 包 含 了 关于 扩展 程序 的 重要 信息 。 
























































这 个 清单 文件 可 以 包含 很 多 参数 和 选项 ， 但 只 有 两 个 字段 是 必须 
的 : name 和 version。 


"name": "My Chrome Extension", 


"version": "1.0" 


现在 在 新 文件 夹 里 创建 一 个 文本 文件 ， 命 名 为 manifest.json， 输 入 
如 下 内 容 : 












































"name": "My First Extension", 
"version": "1.0", 
"description": "Hello World extension.", 
"prowser_action": { 
"default_icon": "icon.png", 
"popup": "popup.html" 






































在 同一 个 文件 夹 里 保存 一 个 图 标 icon.png， 再 按照 程序 清单 24.1 新 
建 popup.html 文 件 ， 也 保存 到 这 个 文件 夹 。 


程序 清单 24.1 Google Chrome 扩 展 popup.html 












































<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
width: 350px; 
} 
div { 
border: 1px solid black; 
padding: 20px; 
font: 20px normal helvetica, verdana, sans-serif; 
} 
</style> 
<script> 
function sayHello() { 
var message = document.createTextNode("Hello World!"); 
var out = document.createElement("div"); 
out.appendChild(message) ; 
document. body.appendChild(out) ; 
} 
window.onload = sayHello; 
</script> 
</head> 
<body> 
</body> 
</html> 


点 击 浏览 器 上 的 扳手 图 标 ， 然 后 选择 “Tools”>“Extensions”。 


选中 “Developer Mode” 选 项 ， 可 以 看 到 更 多 一 点 的 信息 。 
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然后 点 击 “Load Unpacked Extensions” 按 钮 ， 找 到 保存 扩展 程序 文件 
的 文件 夹 并 选择 它 ， 就 会 看 到 类 似 图 24.1 所 示 的 内 容 。 






































A Preferences - Extensi 


< > © & (Ochron 


Preferences 


Under the Hood 


Extensions 


settings/exten 


Extensions 


Load unpacked extension. 


图 24.1 


Hello World 
Hello World extension 
hekimilpofnhg 


Pack extension 
1.0 (Unpacked) 
inpgljmngcld 


Allow in incognito 




















在 Extensions 页 面 里 查看 扩展 程序 





s) Developer mode 


Update extensions now 


wl Enabled | Remove 





选中 扩展 程序 名 称 旁边 的 复 选 框 从 而 启用 这 个 


























击 工具 栏 图 标 来 运行 扩 




















展 程序 了 ， 如 图 24.2 所 示 。 








展 ， 这 样 就 可 以 点 





24.2.2 


调试 扩 

















图 24.2 ”作为 Google Chrome 扩 

















展 程序 的 Hello World 


















































右 击 代表 扩展 程序 的 图 标 ， 在 弹出 菜单 里 可 以 看 到 启用 或 禁用 扩 尾 
程序 的 选项 ， 还 有 一 个 Inspect popup 选 项 ， 点 击 它 就 会 打开 Chrome 的 开 
发 者 工具 ， 如 图 24.3 所 示 。 




















RI 





























7 















































gm BBC - Homepage E 








Google ¢ 





ee w ewe yl sw 























> Developer Tools - chrome-extension://enchekimilpofnhgceipdnpgljmngcl + ~ + 
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Tas |+| > Watch Expressions ti 
2\ <html> | 
3 | <head> | 了 Call Stack 
<style> Sea Pasa 
body { | pede 
width: 35@px; ¥ Scope Variables 
} | 
div { Not Paused 
border: 1px s - 
paldihey eye) ¥ Breakpoints 
font: 20px normal helvetice No Brealpoints 
} || 
</style> | > DOM Breakpoints 
<script> | 
function sayHello() { | je2teBreakpoints 十 
var message = document.cree | ®EventListener Breakpoints 
var out = document.createEl | pwo 
out .appendChild( message) ; Moke 


document .body.appendChild(c | 
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window. onload = sayHello; 
</script> 
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获得 机 场 信息 的 Chrome 扩 展 程序 












































能 够 获取 








EE 
或 











现在 来 让 这 个 Chrome 扩 展 更 加 实 些 。 通 过 利用 jQuery 库 ， 这 个 弹出 





美国 机 场 的 当前 信息 。 

















关于 jQuery 的 介绍 可 以 参考 第 20 章 。 




















为 此 ， 需 要 从 代码 里 实现 一 个 Ajax 调 用 ， 访 问 http://services.faa.gov/ 的 信息 源 。 如 果 





想 了 解 这 个 服务 是 如 何 工作 的 ， 可 以 查看 http://services.faa.gov/airport/status/SFO?format= 
application/json 。 


SFO， 比 如 LAX 代 表 洛 杉 矶 国际 机 场 ，SEA 代 表 


| 








SFO 是 旧金山 机 场 的 缩写 代码 。 我 们 当然 可 以 使 用 其 他 代码 来 蔡 换 前 面 URL 里 的 
雅 图 塔 科 马 国际 机 场 。 





















































从 http://www.fly.faa.gov/flyfaa/usmap.jsp 上 可 以 了 解 机 场 代 码 和 它们 的 位 置 。 








format 参 数 告诉 服务 器 我 们 希望 以 JSON 字 符 串 格式 返回 信息 : 


{"name":"San Francisco 
International", "ICAO":"KSFO","state": "California", "status":{"avgDelay":"" 
=, "closureEnd":"","closureBegin":"","type":"","minDelay":"","trend":"", 
™"reason":"No known delays for this 
airport.","maxDelay":"","endTime":""},"delay":"false","IATA":"SFO"," 
wcity":"San Francisco","weather":{"weather":"Partly 

Cloudy", "meta":{"credit": "NOAA's National Weather 
Service","url":"http://weather.gov/","updated":"1:56 AM 

Local"}, "wind": "Southwest at 9.2mph","temp":"44.0 F (6.7 
=C)","visibility":"10.00"}} 


我 们 用 代码 解析 这 段 信息 ， 以 更 友好 的 形式 显示 出 来 。 


首先 我 们 在 计算 机 上 新 建 一 个 文件 夹 ， 命 名 为 airport， 它 也 会 像 前 面 的 范例 一 样 包含 
= 


图 标 文件 


选择 一 个 图 标 文件 ， 它 会 显示 在 Chrome 工 具 栏 里 ， 用 于 加 载 这 个 扩展 程序 。 本 例 使 
的 文件 是 plane.png， 是 个 20 像 素 x20 像 素 的 机 场 图 标 。 































































































manifest.json 文 件 


这 个 清单 文件 与 前 例 的 十 分 相似 ， 但 有 一 个 明显 的 不 同 之 处 一 个 新 参数 
permissions。 程 序 中 将 使 用 Ajax 调用 来 获取 services.faa.gov 上 的 信息 ， 但 Ajax 调用 只 能 用 于 
HIER. WIN T permissions% Ja, Chrome 服务 器 发 送 适 当 的 header 信 息 息 
来 满足 这 个 要 求 。 完 整 的 manifest.json 如 程序 清单 24.2 所 示 。 


程序 清单 24.2 ”manifest.json 文 件 




























































































"name": "Airport Information", 
"version": "1.0", 
"description": "Information on US airports", 
"browser_action": { 
"default_icon": "plane.png", 
"popup": "popup. html" 


} ， 


"permissions": [ 
"http://services.faa.gov/" 


} 


HTML 文件 


范例 的 HTML 文件 也 叫 popup.html。 当 然 可 以 使 用 其 他 名 称 ， 但 要 相应 地 修改 
manifest.json 文 件 ， 改 变 popup 参 数 的 设置 。 


这 个 HTML 文 件 的 代码 如 程序 清单 24.3 所 示 。 


程序 清单 24.3 ”基本 的 HTML 文 件 popup.html 



































<!DOCTYPE html> 


<html> 
<head> 
<title>Airport Information</title> 
<style> 
body { 
width:350px; 
font: 12px normal arial, verdana, sans-serif; 
} 
#info { 
border: 1px solid black; 
padding: 10px; 
} 
</style> 
</head> 
<body> 


<h2>Airport Information</h2> 
<input type=Text id="airportCode" value="SFO" size="6" /> 
<input id="btn" type="button" value="Get Information" /> 
<div id="info"></div> 

</body> 

</html> 











除了 CSS 样 式 之 外 ， 这 个 页 面 只 包含 几 个 简单 的 元 素 : 一 个 输入 字段 用 于 接收 机 场 代 
码 ， 其 默认 值 是 SFO; 一 个 按钮 用 来 发 出 数据 请 求 ; 还 有 一 个 <div> 用 来 显示 返回 的 结 
果 。 


接 下 来 给 页 面 添加 JavaScript 代 码 。 


于 要 利用 jQuery 来 简化 编码 工作 ， 所 以 首先 要 做 的 是 在 页 面 引 用 它 ， 这 次 我 们 
CDN 方 式 : 






























































































































































<script src="http://code.jquery.com/jquery-latest.min.js" /></script> 














在 页 面 完成 加 载 之 后 ， 我 们 需要 给 “Get Information” 按 钮 添加 一 些 代码 ， 从 而 根据 输 
入 字段 里 的 机 场 代码 构造 请 求 URL， 进 行 Ajax 调 于 远程 服务 的 响应 需要 一 定 的 时 
间 ， 在 此 期 间 提示 用 户 操作 正在 进行 会 给 户 不 错 的 体验 。 


下 面 就 是 完成 这 些 任务 的 代码 : 
















































































$(document) . ready (function(){ 
$("#btn") .click(function(){ 
$("#info").html("Getting information ..."); 
var code = $("#airportCode").val(); 
$.get("http://services.faa.gov/airport/status/" + code + 
"2?format=application/json", 


a 
3 


function(data) { 
displayData(data) ; 


在 页 面 加 载 之 后 ，jQuery 给 按钮 的 onClick 事 件 处 理 器 添加 代码 。 


首先 利用 jQuery 的 html() 方 法 给 <div> 元 素 添加 提示 信息 ， 稍 后 获得 的 机 场 信息 会 缆 盖 
这 个 提示 。 


$("#info").html("Getting information ..."); 
接 下 来 从 输入 字段 获得 机 场 代码 ; 
var code = $("#airportCode").val(); 


然后 构造 Ajax 调用 ， 这 里 使 用 了 GET 方 法 : 



























































$.get("http://services.faa.gov/airport/status/" + code + 
"?format=application/json", 


ta 
3 


function (data){ 
displayData(data) ; 


























Ajax 调用 的 回调 函数 是 displayData0， 会 调整 返 











五 











数据 的 格式 ， 显 示 给 用 户 。 




















function displayData(data) { 
var message = "Airport: " + data.name + "<br />"; 
message += "<h3>STATUS:</h3>"; 
for (i in data.status) { 


if(data.status[i] 
"<br />"; 


} 


message += "<h3>WEATHER:</h3>"; 
for (i in data.weather) { 


!= "") message += i + ": " + data.status[i] + 


if(i != "meta") message += i+ ": " + data.weather[i] + "<br />"; 
} 


$("#info").html(message) ; 


从 第 8 章 的 介绍 可 以 知道 ，JSON 数 据 会 被 直接 解释 为 层级 结构 的 JavaScript 对 象 集合 。 
displayData(data) 函 数 接收 返回 的 JSON 对 象 ， 获 取 data.name (一 个 字符 


个 字符 串 ) 、data.status 和 
data.weather (本 身 也 是 对 象 集合 ) ， 从 而 构造 要 显示 的 内 容 。 


完整 的 代码 如 程序 清单 24.4 所 示 。 
































程序 清单 24.4 完整 的 popup.html 





<!DOCTYPE html> 
<html> 
<head> 
<title>Airport Information</title> 
<style> 
body { 
width:350px; 


font: 12px normal arial, verdana, sans-serif; 


} 
#info { 
border: 1px solid black; 
padding: 10px; 
} 
</style> 


<script src="http://code.jquery.com/jquery-latest.min.js" /></script> 
<script> 


function displayData(data) { 
var message = "Airport: " + data.name + "<br />"; 
message += "<h3>STATUS:</h3>"; 
for (i in data.status) { 


if (data.status[i] 
data.status[i] + "<br />"; 


} 


l= "") message += i+": "+ 


message += "<h3>WEATHER:</h3>"; 





for (i in data.weather) { 
if(i != "meta") message += i+ ": " + data.weather[i] + 
w"<br />"5 
} 
$("#info").html (message) ; 
} 
$(document) .ready(function() { 
$("#btn").click(function(){ 
$("#info").html("Getting information ..."); 
var code = $("#airportCode").val(); 
$.get("http://services.faa.gov/airport/status/" + code + 
=" ?format=application/json", 


i 
了 


function(data) { 
displayData(data) ; 


} 
); 
H); 
})3 
</script> 
</head> 
<body> 


<h2>Airport Information</h2> 

<input type=Text id="airportCode" value="SFO" size="6" /> 

<input id="btn" type="button" value="Get Information" /> 

<div id="info"></div> 
</body> 
</html> 

把 三 个 文件 保存 到 airport 文 件 夹 ， 就 可 以 像 前 面 的 范例 一 样 把 这 个 扩展 添加 到 Google 
Chrome。 
点 击 扩展 程序 的 图 标 ， 页 面 上 会 出 现 一 个 简单 的 表单 。 输 入 机 场 代 码 ， 点 击 Get 
Information 按 钮 ， 程 序 就 会 从 远程 站 点 获取 信息 ， 以 便 以 阅读 的 方式 展现 出 来 。 






























































24.4 展 示 了 这 个 扩展 程序 的 运行 情况 。 
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Federal Aviation Airport Information 


Administration 
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Airport: Phoenix Sky Harbor International 
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图 24.4 关于 机 场 信息 的 扩展 程序 





打包 扩展 程序 


在 完成 扩展 程序 的 开发 之 后 ， 在 扩展 程序 页 面 点 击 “ 打 包 扩展 程序 ...” 按 钮 ， 扩 展 程序 
就 会 被 打包 为 .crx 文 件 。 我 们 可 以 在 站 点 提供 这 个 文件 ， 用 户 就 可 以 在 自己 的 Google 
Chrome 上 安装 这 个 扩展 程序 了 。 







































































24.2.3 下 一 步 


本 章 介 绍 的 练习 只 是 Chrome 扩 展 程序 的 皮毛 。Chrome 对 于 HTML5 
和 CSS3 提 供 了 很 好 的 支持 ， 我 们 可 以 在 扩展 程序 中 使 用 最 新 的 Web 技 
术 ， 比 如 canvas、localStorage 和 CSS 动 画 ， 以 及 访问 外 部 API 和 数据 源 ; 
其 至 可 以 给 Chrome 浏 览 器 的 用 户 界面 添加 按钮 ， 或 是 在 浏览 器 窗口 之 
外 弹出 提示 内 容 。 





































































































24.3 小结 





本 章 ， 实 际 也 是 本 书 ， 到 此 就 结束 了 。 
































在 最 后 一 章 里 ， 我 们 介绍 了 JavaScript 在 HTML Web 页 面 之 外 的 应 
， 还 编 写 了 Google Chrome 浏 览 器 的 一 个 扩展 作为 范例 。 












































本 书 介绍 了 JavaScript 的 很 多 方面 ， 从 让 页 面 更 生动 的 基本 语句 ， 到 
专业 项 目 中 使 用 的 复杂 JavaScript 技 术 。 





















































希望 本 书 介绍 的 内 容 能 够 帮助 读者 获取 扎实 的 JavaScript 基 础 知识 ， 
从 而 能 够 利用 这 种 有 趣 且 实用 的 语言 进一步 提高 自己 的 编码 技巧 。 


视 各 位 在 JavaScript 的 世界 里 找到 属于 自己 的 快乐 ! 






















































































24.4 [WZ 


H: 能 否 以 本 章 介 绍 的 编写 Chrome 扩 展 程序 的 方式 给 Firefox 编 写 
扩展 程序 呢 ? 


答 : 在 Mozilla 平 台 创建 扩展 有 一 点 点 复杂 ， 除 了 要 使 用 JavaScript 
外 ， 还 需要 混合 一 点 XML 。 详 情 请 见 
https://developer.mozilla.org/en/XUL_School/Getting_Started_with_Firefox. 
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H: 能 否 用 JavaScript 编 写 完全 独立 的 、 不 必 在 浏览 器 是 





运行 的 程 





答 : 可 以 。 比 如 Node js (www.nodejs.org ) ， 它 是 一 个 平台 ， 建 
立 在 Google Chrome 的 JavaScript 运 行 引擎 上 ， 用 于 建立 服务 器 端 网 络 应 
用 程序 ， 比 如 Web 服 务 器 、 聊 天 程序 、 网 络 监测 工具 等 。 







































































24.5 ”作业 
请 先 回答 问题 ， 再 参考 后 面 的 答案 。 

















24.5.1 测验 























1. Google Chrome 扩 展 程 序 的 信息 包含 在 哪个 文件 


a. manifest.json 
b. manifest.js 


c. manifest.txt 














2. Google Chrome 扩 展 程 序 的 文件 后 级 是 : 


a. .js 
b. .xml 
C. .CIX 


24.5.2 ”答案 


1. ita. 





2. ic. Google Chrome 扩 展 程序 的 文 伯 





后 绥 是 .crx。 








It 








246 ”练习 


# @ www .programmableweb.com/apitag/weather?format=J. SON 列 出 
的 JSON API， 尝 试 自己 编写 简单 的 Chrome 扩 展 程序 来 显示 这 些 数据 。 


查看 Node js (www.nodejs.org ) 的 文档 ， 了 解 如 何 使 用 JavaScript 编 
写 服务 器 端 脚本 。 






































第 七 部 分 ”附录 
附录 A JavaScript F RTA 
附录 B JavaScript 快 速 参考 
































附录 A JavaScript F R ILE 























什么 特殊 的 工 











JavaScript 开 发 





一 个 浏览 器 就 足够 了 。 
大 多 数 操作 系统 者 


as 
ny 


会 内 置 这 两 种 软件 ， 








或 软件 ， 


一 个 文本 编辑 器 和 























mM 














对 于 编写 代码 来 说 都 是 足够 的 。 





般 情 况 下 它们 的 功能 








] 




















但 是 也 还 有 一 些 




















以 帮助 我 们 提高 了 


a 





绍 的 这 些 。 
Dex: 


请 注意 查看 相关 站 点 或 软件 包 里 的 许可 规则 。 


[ 作 效率 ， 比 如 接 下 来 要 介 


A.1 编辑 器 


对 于 编辑 器 的 选择 完全 是 取决 于 个 人 喜好 的 ， 而 且 大 多 数 程序 员 都 
,的 偏爱 。 下 面 列 出 的 是 常见 的 免费 编辑 软件 。 





















































A.1.1 Notepad++ 

















如 果 是 在 Windows 环 境 下 进行 开发 ， 大 家 一 定 都 知道 记事 本 这 个 软 
件 了 。Notepad++ (http:Wnotepad-plus-plus.org ) 是 个 功能 更 加 强大 的 编 
辑 器 ， 同 时 还 保持 了 体积 小 巧 、 运 行 快速 的 特点 。 


Notepad++ 支 持 行 号 、 语 法 和 括号 突出 显示 、 宏 、 搜 索 和 蔡 换 等 大 


量 功 能 。 














A.1.2 jEdit 
































jEdit 是 个 用 Java 编 写 的 免费 编辑 器 ， 可 以 安装 在 任何 具有 Java 虚 拟 
机 的 平台 (比如 Windows、Mac OS X, OS/2, Linux“#) E. 


jEdit 是 拥有 自己 版 权 的 功能 完整 的 编辑 器 ， 但 还 可 以 通过 超过 200 
个 插件 进行 扩展 ， 从 而 成 为 完整 的 开发 环境 或 高 级 的 XML/HTML 编 辑 
器 。 

























































































jEdit 的 下 载 地 址 是 www.jedit.org 。 


A.1.3 SciTE 





SciTE 最 初 是 作为 Scintilla 编 辑 软 件 的 一 个 组 件 开发 的 ， 现 在 已 经 发 
展 为 功能 完整 强大 ， 具 有 自己 版 权 的 编辑 器 。 


/Awww.scintilla.org/SciTE.html 上 可 以 下 载 它 在 Windows 和 Linux 平 
台 的 免费 版 本 ， 而 苹果 用 户 可 以 从 App 商 店 获得 商业 版 。 


A.1.4 Geany 
Geany (www.geany.org ) 是 个 功能 强大 的 编辑 器 ， 也 可 以 当 作 基 































































































本 的 IDE〈 集 成 开发 环境 ) 使 用 。 它 最 初 的 



































的 IDE， 能 够 安装 在 GTK 



































标 RE 


个 小 巧 、 


发 
L 集 支持 的 任何 平台 上 ， ed 
Linux, Mac OS X 和 fressBSD。 





Geany 可 以 免费 下 载 ， 使 
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权限 遵循 GNU 通 用 











baz 





NS 


共 许 可 。 


快速 


A.2 验证 程序 


为 了 确保 页 面 无 论 在 什么 浏览 器 和 操作 系统 都 按照 预期 正常 工作 ， 
我 们 需要 对 HTML 代 码 的 正确 性 与 对 标准 的 遵循 程度 进行 检查 。 


下 面 介 绍 一 些 能 够 对 此 有 所 帮助 的 在 线 工具 和 程序 。 

















































































































A.2.1 W3C 验 证 服务 


W3C 在 http://validator.w3.org/ 提供 了 一 个 在 线 验证 器 ， 可 以 检查 
HIML、XHTML、SMIL、MathML 和 其 他 标签 语言 文档 的 有 效 性 
们 可 以 输入 待 检查 页 面 的 URL， 或 是 把 代码 直接 拷贝 粘贴 到 验证 器 号 


CSS 验 证 的 方式 与 之 类 似 ， 地 址 是 http://jigsaw.w3.org/css- 
validator/validator.html.en 。 
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A.2.2 ”Web 设计 组 (WDG) 

















WDG 也 提供 了 在 线 验 证 ， 地 址 是 www.htmlhelp.com/tools/validator/ 












































它 与 W3C 验 证 器 类 似 ， 但 在 某 些 环境 下 会 提供 一 点 更 有 用 的 信息 ， 
比如 警告 有 效 但 有 和 危险 的 代码 ， 或 是 突出 显示 未 定义 的 引用 《而 不 是 简 
单 地 把 它们 列 为 错误 ) o 









































A.3 调试 与 检验 工具 


在 尝试 追踪 JavaScript 代 码 里 隐藏 错误 时 ， 或 是 在 分 析 支 行 时 间 来 提 
高 脚本 速度 时 ， 调 试 工 具 可 以 明显 地 节约 我 们 的 时 间 。 


仿 验 工具 能 够 帮助 我 们 编写 条 理 清楚 、 简 洁 、 可 读 性 强 和 跨 平台 的 
代码 。 


























































































































te 


























几 试 和 检验 工具 有 很 多 种 ， 下 面 介绍 其 中 常用 的 一 些 工具 。 














A.3.1 Firebug 























Firebug $2 SE Mozilla Firefox 浏 览 器 里 ， 是 个 出 色 的 调试 、 编 辑 工 
具 。 详 情 请 见 http://getfirebug.com/javascript 。 




















A.3.2 JSLint 

















JSLint (www.jslint.com ) 由 Douglas Crockford 编 写 ， 能 够 分 析 
JavaScript 源 代码 并 报告 潜在 的 问题 ， 包 括 样 式 规范 和 代码 错误 。 





附录 B JavaScript 快 速 参考 


本 附录 中 的 表 B.1、 表 B.2、 
的 一 些 元 素 ， 以 及 内 置 对 象 的 
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表 B.3 和 表 B.4 列 出 了 JavaScript 中 最 常 
属性 和 方法 。 


























































































































































































































表 B.1 JavaScript 操 作 符 
操作 符 描述 

算术 操作 符 

两 个 数 相 乘 

/ 两 个 数 相 除 

%〔 模 ) | 两 个 数 进行 整数 除法 之 后 的 余数 

字符 串 操 作 符 

十 字符 串 相 加 ) 连接 两 个 字符 串 

+= 连接 两 个 字符 串 ， 并 且 把 得 到 的 字符 串 赋予 第 一 个 操作 对 象 

逻辑 操作 符 

&& (逻辑 与 )》 如 果 两 个 操作 数 都 是 true， 就 返回 true; 否则 返回 false 

| OZER) 只 要 有 一 个 操作 是 true， 就 返回 true; 如 果 两 个 操作 数 都 是 
false， 就 返回 false 

I (逻辑 非 ) 如 果 操 作 数 是 true， 就 返回 false; WRB CE false, KRE 
true 

位 操作 符 

& 〈 位 与 ) 如 果 操 作 数 的 对 应 位 都 是 1， 返 回 值 的 相应 位 就 是 1 

^ 〈 位 异 或 ) 如 果 操 作 数 的 对 应 位 中 只 有 一 个 是 1， 返 回 值 的 相应 位 就 是 1 
〈 位 或 ) 如 果 操 作 数 的 对 应 位 中 有 一 个 是 1， 返 回 值 的 相应 位 就 是 1 
〈 位 非 ) 把 1 的 位 置 变 成 0， 把 0 的 位 置 变 成 1， 也 就 是 把 每 一 位 都 取 反 

<< 〈 左 移 位 ) 把 第 一 个 操作 数 向 左 移动 第 二 个 操作 数 指定 的 位 数 

>> sree 把 第 一 个 操作 数 向 右 移动 第 二 个 操作 数 指定 的 位 

Ss (0 填充 的 右 移 位 ， 把 第 一 个 操作 数 向 右 移动 第 三 个 操作 数 指定 的 位 数 ， 
同时 从 左 方 移入 0 

赋值 操作 符 

= 如 果 第 一 个 操作 数 是 变量 ， 把 第 二 个 操作 数 的 值 赋予 它 

+= 如 果 第 一 个 操作 数 是 变量 ， 就 把 两 个 操作 数 相 加 ， 把 结果 赋予 它 























































































































































































































































































































= 如 果 第 一 个 操作 数 是 变量 ， 就 把 两 个 操作 数 相 减 ， 把 结果 赋予 它 
*= 如 果 第 一 个 操作 数 是 变量 ， 就 把 两 个 操作 数 相 乘 ， 把 结果 赋予 它 
IE 如 果 第 一 个 操作 数 是 变量 ， 就 把 两 个 操作 数 相 除 ， 把 结果 赋予 它 
%= 如 果 第 一 个 操作 数 是 变量 ， 就 对 两 个 操作 数 进行 模 运 算 ， 把 结果 赋予 它 
ga 如 果 第 -个 操作 数 是 变量 ， 就 对 两 个 操作 数 进行 位 与 运算 ， 把 结果 赋予 
B 
十 aT -个 操作 数 是 变量 ， 就 对 两 个 操作 数 进行 位 异 或 运算 ， 把 结果 赋 
T 
= 如 果 第 -个 操作 数 是 变量 ， 就 对 两 个 操作 数 进行 位 或 运算 ， 把 结果 赋予 
a 
de ge 个 操作 数 是 变量 ， 就 对 两 个 操作 数 进行 左 移 位 操作 ， 把 结果 赋 
E 
aS 如 果 第 -个 操作 数 是 变量 ， 就 对 两 个 操作 数 进 行 右 移 位 操作 ， 把 结果 赋 
AE 
EA 如 果 第 -个 操作 数 是 变量 ， 就 对 两 个 操作 数 进 行 填 0 的 右 移 位 操作 ， 把 结 
果 赋 予 它 
比较 操作 符 
= 〈 相 等 操作 符 ) 如 果 两 个 操作 数 彼此 相等 ， 返 回 true 
j= 〈 不 相等 操作 符 ) 如 果 两 个 操作 数 不 相等 ， 返 回 true 
=== (严格 相等 ) 如 果 两 个 操作 数 类 型 相同 、 值 相等 ， 返 回 true 
j== (严格 不 相等 ) 如 果 两 个 操作 数 或 者 类 型 不 同 ， 或 者 值 不 相等 ， 返 回 true 
> KRP) 如 果 第 一 个 操作 数 的 值 大 于 第 二 个 操作 数 ， 返 回 true 
= (大 于 等 于 ) 如 果 第 一 个 操作 数 的 值 大 于 或 等 于 第 二 个 操作 数 ， 返 回 true 
< 〈 小 于 ) 如 果 第 一 个 操作 数 的 值 小 于 第 三 个 操作 数 ， 返 回 true 
< 〈 小 于 等 于 ) 如 果 第 一 个 操作 数 的 值 小 于 或 等 于 第 二 个 操作 数 ， 返 回 true 
特殊 操作 符 
2: (条 件 操作 符 〉 执 行 像 “if...else” 的 操作 
(逗号 操作 符 ) 计算 两 个 表达 式 的 值 ， 返 回 第 二 个 表达 式 的 值 
ee T 删除 一 个 对 象 ， 并 且 把 它 从 内 存 移 除 ， 或 是 删除 对 象 的 属性 ， 
是 删除 数组 里 的 一 个 元 素 
function | 创建 匿名 函数 
in 如 果 指 定 对 象 包含 特定 属性 ， 就 返回 true 
instanceof | 如 果 指 定 对 象 是 特定 类 型 的 实例 ， 就 返回 true 
new 创建 指定 类 型 的 一 个 新 对 象 
typeof 返回 操作 数 的 类 型 名 称 












































void | 允许 计算 表达 式 的 值 但 不 返回 值 











方法 HR 

















f=] 

4 
pars 
Tn 
H 
= 
ok 
下 
> 





substring 返 





toUpperCase ”| 把 字符 串 里 全 部 字符 转化 为 大 写 








toLowerCase “| 把 字符 串 里 全 部 字符 转化 为 小 写 








































































































indexOf 在 一 个 字符 申 里 寻找 为 一 个 字符 申 

lastIndexOf 从 一 个 字符 串 的 末尾 开始 寻找 另 一 个 字符 串 

replace 在 字符 串 里 寻找 特定 子囊， 用 新 的 子 串 替代 找到 的 子 呈 
split 把 字符 串 分 解 为 一 个 数组 ， 返 回 一 个 新 数组 

link 利用 字符 串 的 文本 创建 一 个 HTML 链 接 

anchor 在 当前 页 面 里 创建 一 个 HTML 锚 点 











表 B.3 。 ”Math 对象 


























属性 ipa 
常数 
E 自然 对 数 的 底 〈 大 约 是 2.718) 
LN2 2 的 自然 对 数 〈 大 约 是 0.693) 
LN10 10 的 自然 对 数 〈 大 约 是 2.302) 
LOG2E 以 2 为 底 e 的 对 数 〈 大 约 是 1.442) 





































































































LOG10E 以 10 为 底 e 的 对 数 〈 大 约 是 0.434) 

PI HEZ (大 约 3.141 59) 

SQRT1 2 0.5 的 平方 根 〈 大 约 是 0.707) 

SQRT2 2 的 平方 根 〈 大 约 是 1.414 2) 
方法 WR 

代数 

acos BAK 

asin 反正 弦 

atan 反正 切 

cos 余弦 

sin 正弦 

tan 正切 

统计 与 对 数 

exp 返回 e〈 自 然 对 数 ) WIFE 

log 返回 数值 的 自然 对 数 

max 楼 收 两 个 数值 ， 返 回 较 大 的 数值 

min 接收 两 个 数值 ， 返 回 较 小 的 数值 











基本 运算 和 取 整 





abs 


数值 的 绝对 值 



































ceil 把 数值 向 上 取 整 到 最 近 的 整数 
floor 包 数 值 向 下 取 整 到 最 近 的 整数 
pow -个 数值 与 另 一 个 数值 的 震 
round 把 数值 取 整 到 最 近 的 整数 

sqrt 数值 的 平方 根 

随机 数 

random 0 到 1 之 间 的 随机 数 











表 B.4 Date 对 象 





方法 


描述 





getDate() 





返回 月 份 里 的 日 期 (1 一 31) 
































getDay() 返回 星期 里 的 日 期 (0 一 6) 
































getFullYear() 返回 年 份 ( 四 位 数字 ) 
getHours() 返回 小 时 数 (O~23) 
getMilliseconds() 返回 毫秒 数 (O~999) 


































































































getMinutes() 返回 分 钟 数 〈0 一 59) 

getMonth() 返回 月 份 数 (0 一 11) 

getSeconds() 返回 秒 数 〈0 一 59) 

getTime() 获得 自 1970 年 1 月 1 日 以 来 的 毫秒 数 
getTimezoneOffset() | 返回 与 GMT 的 时 差 及 本 地 时 间 ， 单 位 是 分 
getUTCDate() 根据 全 球 统一 时 间 返 回 月 份 里 的 日 期 (1 一 31) 
getUTCDay() 根据 全 球 统一 时 间 返 回 星期 里 的 日 期 (0 一 6) 
getUTCFullY ear() 根据 全 球 统一 时 间 返 回 年 份 〈 四 位 数字 ) 
getUTCHours() 根据 全 球 统一 时 间 返 回 小 时 数 CO~23) 




















getUTCMilliseconds() | 根据 全 球 统一 时 间 返 回 毫秒 数 CO~999 ) 











tUTCMinutes() 根据 全 球 统一 时 间 返 回 分 钟 数 〈0 一 59) 
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五 


tUTCMonth() 根据 全 球 统一 时 间 返 回 月 份 数 CO~11) 
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getUTCSeconds() 根据 全 球 统一 时 间 返 回 秒 数 (0 一 59) 

parse() 解析 日 期 字符 串 ， 返 回 自 1970 年 1 月 1 日 午夜 至 今 的 毫秒 数 
setDate() 设置 月 份 里 的 日 期 数 (1 ~31) 

setFullYear() 设置 年 份 〈 四 位 数字 ) 

setHours() 设置 小 时 数 〈0 一 23) 

setMilliseconds() 设置 毫秒 数 〈0 一 999) 

setMinutes() 设置 分 钟 数 〈0 一 59) 

setMonth() WALA Hee (O~11) 

setSeconds() 设置 秒 数 〈0 一 59) 

setTime() an oe 1 日 午夜 以 来 的 毫秒 数 进行 加 减 ， 以 结果 设置 日 
setUTCDate() 根据 全 球 统一 时 间 设 置 月 份 里 的 日 期 (1 一 31) 
setUTCFullYear() 根据 全 球 统一 时 间 设置 年 份 〈 四 位 数字 ) 

setUTCHours() 根据 全 球 统一 时 间 设 置 小 时 数 〈0 一 23) 
setUTCMilliseconds() | 根据 全 球 统一 时 间 设 置 毫 秒 数 (0 一 999) 

setUTCMinutes() 根据 全 球 统一 时 间 设 置 分 钟 数 〈0 一 59) 



































































































































setUTCMonth() 根据 全 球 统一 时 间 设 置 月 份 数 CO~11) 
setUTCSeconds() 根据 全 球 统一 时 间 设 置 秒 数 (0 一 59) 
toDateString() 把 Date 对 象 的 日 期 部 分 转化 为 直观 的 字符 串 
toLocaleDateString() | 以 遵循 本 地 规范 的 字符 串 返 回 Date 对 象 的 日 期 部 分 
toLocaleTimeString() | 以 遵循 本 地 规范 的 字符 串 返 回 Date 对 象 的 时 间 部 分 
toLocaleString() 以 遵循 本 地 规范 的 字符 串 返 回 Date 对 象 

toString() 把 Date 对 象 转化 为 字符 串 

toTimeString() 把 Date 对 象 的 时 间 部 分 转化 为 字符 串 
toUTCString() 根据 全 球 统一 时 间 把 Date 对 象 转化 为 字符 串 

UTCO 根据 全 球 统一 时 间 ， 返 回 自 1970 年 1 月 1 日 午夜 以 来 的 毫秒 数 
valueOf() 返回 Date 对 象 的 原始 值 



































欢迎 来 到 异步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn ) 是 人 民 邮 电 出 版 社 旗 下 IT 专业 图 书 旗 
舰 社区 ， 于 2015 年 8 月 上 线 运 营 。 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 IT 专业 优质 出 版 资源 和 编 
辑 策划 团队 ， 打 造 传统 出 版 与 电子 出 版 和 自 出 版 结合 、 纸 质 书 与 电子 书 
结合 、 传 统 印刷 与 POD 按 需 印刷 结合 的 出 版 平台 ， 提 供 最 新 技术 资讯 ， 
为 作者 和 读者 打造 交流 互动 的 平台 。 














































































































4 异步 社区 






近期 活动 





异步 社区 成 立 一 周年 大 以 刚 书 活动 开启 ! 
异步 社区 的 来 历 异步 社区 盖 人 民 邮 思 出 版 社 揽 下 
2 








Hms TRS , 我 在 这 里 S655 
HTMLS#E&E ! .. 
Hi saren 201 J 

WE6O 推荐 1 
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SS 
ee Ed SDHORPR + 更 全 
EDIT 
i5 — = BRHF thon AIST (%82 


a= see Blum $9888, Christine 
Bresnahan BRIA (YER) IFI 
Sum (22) 


Python PARERE 。 机 器 学 习 项 目 开发 实战 。 三 莫 派 Python 妨 性 入 门 。 像 计 算 机 科学 京 一 样 号 
= 与 实战 ( 第 2 版 考 Python ( m24 


社区 里 都 有 什么 ? 
购买 图 书 
我 们 出 版 的 图 书 涵盖 主流 IT 技术 ， 在 编程 语言 、Web 技 术 、 数 据 科 
学 等 领域 有 众多 经 典 畅销 图 书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 
400 多 种 ， 部 分 新 书 实现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 会 定期 发 布 新 
书 书 讯 。 
下 载 资源 
社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 程序 源 代码 。 
另外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 注册 成 为 社区 用 户 就 
可 以 免费 下 载 。 
与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社 区 ， 您 可 以 关注 他 们 ， 咨 询 技术 问 
题 ， 可 以 阅读 不 断 更 新 的 技术 文章 ， 听 作 译 者 和 编辑 畅 聊 好 书 背 后 有 
的 故事 ， 还 可 以 参与 社区 的 作者 访谈 栏目 ， 向 您 关注 的 作者 提出 采访 题 
目 。 
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灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 纸 质 图 书 直 接 从 人 民 
邮电 出 版 社 书库 发 货 ， 电 子 书 提供 多 种 阅读 格式 。 


对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服务 ， 用 户 可 以 第 一 时 间 
买 到 心仪 的 新 书 。 


j 户 帐户 中 的 积分 可 以 用 于 购书 优惠 。100 积 分 =1 元 ， 购 买 图 书 
时 ， 在 a 里 填 入 可 使 用 的 积分 数值 ， 即 可 扣 减 相应 金额 。 
























































































































































































































































购买 本 电子 书 的 读者 专 享 异步 社区 优惠 券 。 Em 有 方法 : 注册 成 为 社区 用 户 ， 在 下 单 购书 
时 输入 “57AWG ”， 然 后 点 击 “ 使 用 优惠 码 ”， 即 可 享受 电子 书 8 折 优 惠 〈 本 优惠 券 只 可 使 用 一 
W a 


纸 电 图 书 组 合 购买 


社区 独家 提供 纸 质 图 书 和 电子 书 组 合 购买 方式 ， 价 格 优惠 ， 一 次 购 
买 ， 多 种 阅读 选择 。 




























































































软 技能 : 代码 之 外 的 生存 指南 

[2i Z. tS ( John Z. Sonmez ) (作者 ) 王 小 刚 ( 译 者 ) HS ETRA) 
C 6 WY 90K 
B= ”推荐 ms 阅读 


这 是 一 本 真正 从 “人 ”而 非 按 术 也 非 管 理 ) 的 角度 关注 软件 开发 人 员 号 身 发 展 的 蔬 。 书 中 论述 的 
内 容 既 涉及 生活 习 慢 ,又 包括 导 维 方式 ,从 显 技术 中 “人 ”的 因素 ,全面 潮解 软件 行业 从 业 人 员 所 
EMA “MIRAE. 

SBRETREASARSEHAA ES . MERRIER Eo TSR . 从 创 
建 大 过 欢迎 的 博客 到 打 到 你 的 个 人 品牌 ， 从 提高 号 己 工 作 效 至 到 与 如 何 与 “拖延 证 ”做 斗争 ， 基 至 
包括 如 何 投资 不 动产 ， 如 何 关注 自己 的 键 康 . 

StHQABWS. SRESS. SIS. S778. BUS. 255. HeSSte. METS 
件 行 业 从 业 人 员 所 需 的 “ 软 技能 ”。 


© GRR +5900 着 46.02(78 折 ) 


ES = 


© 电子 版 + Ee ¥59.00 


社区 里 还 可 以 做 什么 ? 
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您 可 以 在 图 书页 面 下 方 提交 勘误 ， 每 条 勘误 被 确认 后 可 以 获得 100 
积分 。 热 心 勘误 的 读者 还 有 机 会 参与 书稿 的 审 校 和 翻译 工作 。 







































































社区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写作 的 您 可 以 在 此 一 试 
手 ， 在 社区 里 分 享 您 的 技术 心得 和 读书 体会 ， 更 可 以 体验 自 出 版 的 乐 
趣 ， 轻 松 实现 出 版 的 梦想 。 


如 果 成 为 社区 认证 作 译 者 ， 还 可 以 享受 异步 社区 提供 的 作者 专 享 特 
色 服务 。 


会 议 活动 早 知道 
您 可 以 掌握 IT 圈 的 技术 会 议 资讯 ， 更 有 机 会 免费 获 赠 大 会 门票 。 





















































































































































加 入 异步 
扫描 任意 二 维 码 都 能 找到 我 们 : 
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异步 社区 





微 信服 务 号 











QQ 群 : 368449889 





社区 网 址 : 


a 


官方 微 信 : 异步 社区 


www.epubit.com.cn 






































官方 微 博 : @ 人 邮 异 步 社 区 ，@ 人 民 邮 电 出 版 社 - 信 息 技术 分 社 











contact@epubit.com.cn 


